/* ══════════════════════════════════════════════════════════════
   MiTS-HELLAS
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:        #020509;
  --gold:      #3fe0ff;   /* the single accent — cyan, not gold */
  --gold-dim:  rgba(63,224,255,.30);
  --cyan:      #3fe0ff;
  --text:      #dff3fb;
  --muted:     #5f7d8c;
  --line:      rgba(63,224,255,.12);
  --mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* One place to retune the whole hover feel. */
  --tile-lift:      1.20;   /* the 20% growth */
  --tile-ease:      cubic-bezier(.16,.84,.28,1);
  --tile-dur:       .55s;

  /* The emblem's ring colours, so a theme can retint the whole mark. */
  --ring-1: rgba(63,224,255,.22);
  --ring-2: rgba(63,224,255,.14);
  /* The nine seats on the emblem: one style for taken, one for waiting. */
  --seat-dim:  rgba(63,224,255,.14);
  --seat-ring: rgba(63,224,255,.42);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100vh;
  background:var(--bg); color:var(--text);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── Background layers ───────────────────────────────────────── */
#bg{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; display:block;
  /* Painted fallback: if WebGL never starts, this is still a sky. */
  background:radial-gradient(110% 80% at 50% 20%, rgba(6,40,58,.7) 0%, transparent 66%), var(--bg);
}
.vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 40%, rgba(0,2,6,.84) 100%);
}
.grain{
  position:fixed; inset:-50%; z-index:2; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 7s steps(6) infinite;
}
@keyframes grainShift{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-3%,2%) }  40%{ transform:translate(2%,-3%) }
  60%{ transform:translate(-2%,-2%) } 80%{ transform:translate(3%,1%) }
}

.stage{ position:relative; z-index:3; overflow-x:clip; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; padding:6vh 20px 4vh; text-align:center;
  /* The tilted layers, their glow filters and the sheen all reach past the
     emblem's own box on purpose. `clip` contains that without turning the
     hero into a scroll container the way `hidden` would. */
  overflow-x:clip;
}
.emblem{
  position:absolute; top:50%; left:50%;
  width:min(80vmin, 640px); aspect-ratio:1;
  transform:translate(-50%,-60%);
  pointer-events:none; opacity:.95;
  /* The depth the layers are seen through. Shorter = more dramatic. */
  perspective:1150px;
  perspective-origin:50% 46%;
}
.defs-only{ position:absolute; width:0; height:0; overflow:hidden; }

/* Each wheel is its own plane at its own depth. preserve-3d on both the
   stage and the layers is what makes the parallax between them real rather
   than painted — flatten either one and the whole thing collapses. */
.emblem-3d{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(16deg) rotateY(-6deg);
  will-change:transform;
}
.layer{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:translateZ(var(--z, 0px));
  will-change:transform;
}
.layer svg{
  /* No translateZ here. --z is inherited from the layer, so repeating it
     would push every wheel to twice its intended depth. */
  position:absolute; inset:0; width:100%; height:100%; overflow:visible;
}
@keyframes spin3d{
  from{ transform:translateZ(var(--z,0px)) rotate(0deg) }
  to  { transform:translateZ(var(--z,0px)) rotate(360deg) }
}

/* The light. A narrow band of specular sweeping the wheels, and a soft bloom
   sitting in the middle of the assembly. Screen blending so it only ever adds
   light — it can lift the bronze but never muddy the background. */
.emblem-sheen{
  position:absolute; inset:6%;
  border-radius:50%;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    conic-gradient(from 0deg,
      transparent 0deg, rgba(255,236,190,.00) 30deg, rgba(255,236,190,.13) 52deg,
      rgba(255,255,255,.20) 62deg, rgba(120,220,255,.10) 74deg,
      rgba(255,236,190,.00) 100deg, transparent 360deg);
  /* Feathered at both edges, or the band's own rim shows as a hard smudge. */
  -webkit-mask:radial-gradient(circle, transparent 20%, rgba(0,0,0,.4) 30%, #000 42%,
                               #000 72%, rgba(0,0,0,.35) 84%, transparent 92%);
          mask:radial-gradient(circle, transparent 20%, rgba(0,0,0,.4) 30%, #000 42%,
                               #000 72%, rgba(0,0,0,.35) 84%, transparent 92%);
  filter:blur(6px);
  animation:sheenSpin 13s linear infinite;
  opacity:.7;
}
@keyframes sheenSpin{ to{ transform:rotate(360deg) } }

/* A breath of light behind the whole mechanism. */
.emblem::after{
  content:''; position:absolute; left:50%; top:50%;
  width:62%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(63,224,255,.10) 0%, rgba(63,224,255,.04) 42%, transparent 70%);
  animation:emblemBreath 7.5s ease-in-out infinite;
}
@keyframes emblemBreath{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(.94) }
                          50%{ opacity:1; transform:translate(-50%,-50%) scale(1.06) } }

/* The lockup reads as one mark: MITS above, HELLAS ruled beneath it, the pair
   sitting centred inside the ring rather than straddling it. */
.wordmark{
  position:relative; margin:0;
  font-weight:900; letter-spacing:-.02em; line-height:.86;
  font-size:clamp(44px, 9.6vw, 132px);
  display:flex; flex-direction:column; align-items:center; gap:.13em;
  animation:riseIn 1.5s var(--tile-ease) both .15s;
}
.wm-line{
  display:flex; align-items:center; gap:.9em;
  width:100%; justify-content:center;
}
.wm-line i{
  height:1px; flex:0 0 clamp(26px, 6vw, 110px);
  background:linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.wm-main{
  /* background-image, NOT the background shorthand: the shorthand resets
     background-clip, and a themed override would silently turn the wordmark
     into a solid rectangle. */
  background-image:linear-gradient(168deg, #ffffff 4%, #8ff0ff 42%, #0d8ba8 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 46px rgba(63,224,255,.26));
}
/* MiTS — the lowercase i is the tell. Its dot is a lit seat, the same light
   as the live node on the emblem, so the mark and the dial agree. */
.wm-i{
  position:relative;
  background-image:linear-gradient(168deg, #ffffff 4%, #8ff0ff 42%, #0d8ba8 96%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wm-i::after{
  content:''; position:absolute; left:50%; top:.055em;
  width:.20em; height:.20em; transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle, #fff6d8 0%, var(--gold) 45%, rgba(255,208,58,0) 72%);
  box-shadow:0 0 .32em rgba(255,208,58,.85), 0 0 .9em rgba(255,208,58,.45);
  animation:iDot 3.2s ease-in-out infinite;
}
@keyframes iDot{ 0%,100%{ opacity:.8; transform:translateX(-50%) scale(.94) }
                  50%{ opacity:1; transform:translateX(-50%) scale(1.06) } }

.wm-sub{
  font-family:var(--mono); font-weight:400;
  font-size:.155em; letter-spacing:.56em;
  color:var(--text); opacity:.6;
  padding-left:.56em;   /* the trailing letter-space, given back */
  text-shadow:0 0 26px rgba(63,224,255,.3);
  white-space:nowrap;
}
/* Clear of the ring's lower arc, with its own darkness behind it. */
.tagline{
  margin:clamp(150px, 25vh, 300px) 0 0;
  text-shadow:0 2px 14px rgba(0,0,0,.9), 0 0 30px rgba(0,0,0,.7); font-size:clamp(12px,1.5vw,16px);
  letter-spacing:.26em; text-transform:uppercase; color:var(--muted);
  font-weight:300;
  animation:riseIn 1.5s var(--tile-ease) both .45s;
}
.tagline em{ color:var(--gold); font-style:normal; opacity:.85; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:22px; height:36px; border:1px solid var(--line); border-radius:12px;
  animation:riseIn 1.5s var(--tile-ease) both .9s;
}
.scroll-cue span{
  position:absolute; left:50%; top:8px; width:3px; height:6px; border-radius:2px;
  background:var(--gold); transform:translateX(-50%);
  animation:cueDrop 2.1s var(--tile-ease) infinite;
}
@keyframes cueDrop{ 0%{ opacity:0; top:7px } 30%{ opacity:1 } 70%{ opacity:1; top:20px } 100%{ opacity:0; top:22px } }

/* ── Grid ────────────────────────────────────────────────────── */
.grid-wrap{ padding:2vh 4vw 12vh; }
.grid{
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(14px, 2vw, 30px);
  /* The room the 3D tilt lives in. Without it, rotateX/Y are flat. */
  perspective:1400px;
}

.tile{
  /* An <a> is inline by default. As a direct grid item it was blockified for
     free; inside the slot wrapper it has to be told. */
  display:block;
  position:relative; aspect-ratio:16/10;
  border:1px solid var(--line); border-radius:4px;
  background:linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  overflow:hidden; cursor:pointer;
  transform-style:preserve-3d;
  transition:transform var(--tile-dur) var(--tile-ease),
             box-shadow var(--tile-dur) var(--tile-ease),
             border-color .4s ease, z-index 0s;
  will-change:transform;
}

/* The wrapper handles arrival and stacking; the tile handles hover. Keeping
   them apart is what lets an inline hover transform survive — a CSS animation
   beats an inline style, so the two must never touch the same property. */
.slot{
  position:relative; display:block; min-width:0;
  opacity:0; animation:tileIn .9s var(--tile-ease) both;
}
.slot.is-hot{ z-index:20; }
@keyframes tileIn{ from{ opacity:0; transform:translateY(34px) scale(.94) } to{ opacity:1; transform:none } }

.tile:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }

/* The grow. The slot lifts it clear of its neighbours, as asked. */
.tile.is-hot{
  border-color:var(--gold-dim);
  box-shadow:
    0 34px 90px rgba(0,0,0,.8),
    0 0 0 1px rgba(63,224,255,.45),
    0 0 70px rgba(63,224,255,.14);
}

.tile-media{ position:absolute; inset:0; }
.tile-media img,
.tile-media video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.tile-media img{
  transition:opacity .5s ease, transform 1.1s var(--tile-ease), filter .5s ease;
  filter:saturate(.72) brightness(.62);
  transform:scale(1.02);
}
.tile-media video{ opacity:0; transition:opacity .55s ease; }
.tile.is-hot .tile-media img{ opacity:0; transform:scale(1.06); }
.tile.is-hot .tile-media video{ opacity:1; }
.tile.is-hot .tile-media img.no-video{ opacity:1; filter:saturate(1) brightness(.9); transform:scale(1.08); }

/* Nothing to show yet: a placeholder that still looks designed. */
.tile-blank{
  position:absolute; inset:0;
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(120,220,255,.05), transparent 62%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.017) 0 12px, transparent 12px 24px);
}

.tile-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,5,10,.94) 4%, rgba(4,5,10,.55) 34%, transparent 68%);
  transition:background .45s ease;
}
/* Once the clip is running there is moving detail under the text, so the
   scrim has to work harder or the title fights the video. */
.tile.is-hot .tile-scrim{
  background:linear-gradient(to top,
    rgba(3,4,9,.97) 0%, rgba(3,4,9,.90) 26%, rgba(3,4,9,.42) 52%, transparent 78%);
}
.tile-body{
  position:absolute; left:0; right:0; bottom:0; padding:16px 18px 15px;
  transform:translateZ(28px);   /* floats above the art in 3D */
}
.tile-idx{
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  color:var(--muted); display:block; margin-bottom:6px;
}
.tile-title{
  margin:0; font-size:clamp(15px,1.4vw,21px); font-weight:800; letter-spacing:.02em;
  transition:color .35s ease;
}
.tile.is-live.is-hot .tile-title{ color:var(--gold); }
.tile-blurb{
  margin:7px 0 0; font-size:11.5px; line-height:1.5; color:var(--muted);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .5s var(--tile-ease), opacity .4s ease, margin .5s var(--tile-ease);
}
.tile.is-hot .tile-blurb{ max-height:64px; opacity:1; }
.tile-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.tile-tag{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 7px; border:1px solid var(--line); border-radius:99px; color:var(--muted);
}
.tile-cta{
  position:absolute; top:14px; right:14px;
  font-family:var(--mono); font-size:9px; letter-spacing:.16em;
  padding:5px 10px; border-radius:99px;
  border:1px solid var(--gold-dim); color:var(--gold);
  background:rgba(8,6,2,.6);
  opacity:0; transform:translateY(-8px) translateZ(34px);
  transition:opacity .4s ease, transform .45s var(--tile-ease);
}
.tile.is-live.is-hot .tile-cta{ opacity:1; transform:translateY(0) translateZ(34px); }

.tile-soon{
  position:absolute; top:14px; right:14px;
  font-family:var(--mono); font-size:8.5px; letter-spacing:.16em;
  padding:5px 10px; border-radius:99px;
  border:1px solid var(--line); color:var(--muted);
  transform:translateZ(30px);
}
.tile.is-soon{ cursor:default; }
.tile.is-soon.is-hot{ box-shadow:0 26px 70px rgba(0,0,0,.6); border-color:rgba(255,255,255,.16); }
.tile.is-soon .tile-title{ color:var(--muted); font-weight:600; }

/* The sweep of light that crosses a tile as it wakes. */
.tile-sheen{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.13) 48%, transparent 62%);
  transform:translateX(-120%);
}
.tile.is-hot .tile-sheen{ opacity:1; animation:sheen 1.1s var(--tile-ease) 1; }
@keyframes sheen{ to{ transform:translateX(120%) } }

/* ── Footer ──────────────────────────────────────────────────── */
.foot{
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:26px 20px 40px; border-top:1px solid var(--line);
  font-family:var(--mono); font-size:9px; letter-spacing:.18em;
  color:var(--muted); text-transform:uppercase;
}
.foot-sep{ opacity:.4; }

/* ── Smaller screens ─────────────────────────────────────────── */
@media (max-width:900px){
  .grid{ grid-template-columns:repeat(2, 1fr); perspective:none; }
  .tile{ aspect-ratio:16/11; }
  .wm-sub{ letter-spacing:.3em; }
}
@media (max-width:560px){
  .grid{ grid-template-columns:1fr; }
  .emblem{ width:96vmin; }
}

/* ── Respect a stated preference for stillness ───────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .tile.is-hot{ transform:none !important; }
}

/* The NINE emblem's live nodes breathe; the halo opens outward. */
.node-live{ animation:nodePulse 3.2s ease-in-out infinite; transform-origin:center; }
.node-halo{ animation:nodeHalo 3.2s ease-out infinite; transform-origin:center; }
@keyframes nodePulse{ 0%,100%{ opacity:.85 } 50%{ opacity:1 } }
@keyframes nodeHalo{ 0%{ opacity:.5; r:9 } 70%{ opacity:0; r:22 } 100%{ opacity:0; r:22 } }

/* The astrolabe's alidade sweeps rather than spins at ring speed. */
.foot-build{ color:#4a5a66; letter-spacing:.12em; }

.foot-x {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.2s ease;
}
.foot-x:hover {
  color: #fff;
}


/* ── Home music toggle ───────────────────────────────────────── */
.music-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(63, 224, 255, 0.22);
  background: rgba(2, 5, 9, 0.72);
  color: var(--gold);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: opacity 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.music-btn:hover {
  border-color: rgba(63, 224, 255, 0.55);
  color: #fff;
}
.music-btn.off {
  opacity: 0.45;
}