/* ========== Goblin Division — Operator Minimalism / ZERO FLUFF ========== */

/* ---- Variables ---- */
:root{
  --bg:#0A0A0A;          /* charcoal */
  --fg:#D0D0D0;          /* iron gray */
  --muted:#777777;       /* secondary text */
  --accent:#B3362E;      /* tactical red */
  --ok:#58D68D;          /* system nominal (rare) */
  --grid:8px;            /* spacing unit */
}

/* ---- Base / Reset ---- */
*{box-sizing:border-box}
html,body{height:100%}
html{font-size:16px}
body{
  margin:0;
  font-family: Inter, "IBM Plex Sans", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;

  /* Center content with intent */
  display:grid;
  place-items:center;
  padding:calc(var(--grid)*4);

  animation:fade 2.0s linear forwards;
  opacity:0;
}
@keyframes fade{to{opacity:1}}

.center{
  display:grid;
  place-items:center;
  gap:calc(var(--grid)*2);
  text-align:center;

  /* fallbacks, then modern units */
  min-height:100vh;
  min-height:100svh;   /* iOS */
  min-height:100dvh;   /* Chrome/Android */

  /* notch / safe-area padding */
  padding:
    max(calc(var(--grid)*4), env(safe-area-inset-top))
    max(calc(var(--grid)*4), env(safe-area-inset-right))
    max(calc(var(--grid)*4), env(safe-area-inset-bottom))
    max(calc(var(--grid)*4), env(safe-area-inset-left));
}

/* ---- Layout container (optional future use) ---- */
.container{
  width:100%;
  max-width:900px;
  text-align:center;
}

/* ---- Typography ---- */
h1,h2{margin:0}
h1{
  font-weight:700;
  letter-spacing:0.15em;         /* precision over personality */
  line-height:1.05;
  font-size:clamp(2.25rem, 6vw, 4rem);
  text-transform:uppercase;       /* authority */
}
h2{
  margin-top:calc(var(--grid)*2);
  color:var(--muted);
  font-weight:400;
  letter-spacing:0.02em;          /* quiet, readable */
  line-height:1.35;
  font-size:clamp(1rem, 2.2vw, 1.25rem);
}

/* ---- Links (rare) ---- */
a{
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
a:hover{border-bottom-color:var(--fg)}
a:focus{outline:2px solid var(--accent); outline-offset:2px}

/* ---- Buttons (if ever needed) ---- */
.button{
  display:inline-block;
  padding:calc(var(--grid)*1) calc(var(--grid)*2);
  border:1px solid var(--fg);
  background:transparent;
  color:var(--fg);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.06em;
  cursor:pointer;
}
.button:hover{border-color:var(--accent); color:var(--accent)}
.button:focus{outline:2px solid var(--accent); outline-offset:2px}

/* ---- Rules / Dividers (no shadows) ---- */
.hr{
  height:1px;
  background:linear-gradient(to right, transparent, #444, transparent);
  margin:calc(var(--grid)*3) 0;
}

/* ---- States ---- */
.is-danger{color:var(--accent)}
.is-ok{color:var(--ok)}
.is-muted{color:var(--muted)}

/* ---- Selection ---- */
::selection{background:rgba(179,54,46,0.35); color:#fff}

/* ---- Motion discipline ---- */
@media (prefers-reduced-motion:no-preference){
  .fade-in{opacity:0; transform:translateY(4px); animation:in .18s linear forwards}
  @keyframes in{to{opacity:1; transform:none}}
}

/* ---- Small screens ---- */
@media (max-width:420px){
  body{padding:calc(var(--grid)*3)}
}

/* ---- Logo styling ---- */
.logo {
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.15em;
  position:relative;
  display:inline-block;
}

.g-wrap{
  position:relative;
  display:inline-block;
  width:1ch;              /* one character slot */
  height:1em;             /* match line height */
  line-height:1;
  vertical-align:baseline;
  transform:translateY(0.13em);
  margin-right:0.15em;    /* matches your 0.15em tracking */
  overflow:visible;       /* allow horns to exceed when scaled */
}

.g-letter,.g-rune{
  position:absolute; top:50%; left:50%;
  transform-origin:center;
  will-change:transform, opacity;
  transition:transform 2.1s linear, opacity 1.2s linear;
}

.g-rune{
  top: 47%; /* lower number raises it; default was 50% */
  width:100%;             /* <-- force image to 1em tall via the slot */
  height:100%;
  object-fit:contain;
  transform:translate(-50%, -50%) rotateZ(-90deg) scale(1.25); /* -60% lifts it a bit */
  transform-origin:center;
  transition:transform 1.5s linear, opacity 0.8s linear;
}

/* start */
.g-letter{ transform:translate(-50%,-50%) rotateZ(0)    scale(1);    opacity:1; }
.g-rune  { transform:translate(-50%,-50%) rotateZ(-90deg) scale(1.65); opacity:0; }

/* active */
.logo.active .g-letter{ transform:translate(-50%,-50%) rotateZ(90deg)  scale(1);    opacity:0; }
.logo.active .g-rune  { transform:translate(-50%,-50%) rotateZ(0)      scale(1.65); opacity:1; }