:root {
  --night: #04050b;
  --ink: #0a0d18;
  --moon: #dfe5f2;
  --haze: #8f9bbd;
  --dim: #4d556c;
  --aura: #5c4d9a;
  --ease: cubic-bezier(.22, .7, .12, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

@font-face { font-family: "Pirata One"; src: url("../assets/fonts/pirata-one.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

body {
  min-height: 100%;
  background: #060608;
  color: var(--moon);
  font-family: "Archivo", system-ui, sans-serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Header / logo ---------- */
.brand {
  position: fixed; top: clamp(18px, 3.5vh, 34px); left: 50%; transform: translateX(-50%);
  z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-decoration: none; color: inherit;
}
.brand .mark {
  position: relative; display: block; width: clamp(40px, 4vw, 54px);
  transform: perspective(300px) rotateX(var(--lrx, 0deg)) rotateY(var(--lry, 0deg)) translateY(var(--lty, 0px)) scale(var(--ls, 1));
  transition: transform .5s var(--ease);
}
.brand .mark img { width: 100%; height: auto; display: block; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); }
.brand:hover .mark { --ls: 1.12; --lty: -3px; }
.mark-glint {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../assets/logo-chrome.webp") center / 100% 100% no-repeat;
          mask: url("../assets/logo-chrome.webp") center / 100% 100% no-repeat;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.6) 50%, transparent 60%) no-repeat;
  background-size: 260% 100%; background-position: 160% 0;
  mix-blend-mode: screen; opacity: 0;
}
.brand:hover .mark-glint { animation: markglint 1.1s var(--ease) forwards; }
@keyframes markglint { 0% { opacity: 1; background-position: 160% 0; } 100% { opacity: 1; background-position: -60% 0; } }
.brand:hover .mark img { filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(210,222,255,.14)); }
.brand .name { font-weight: 800; font-size: 11px; letter-spacing: .16em; text-indent: .16em; color: #e9ecf3; }

/* ---------- Soon screen ---------- */
.soon {
  position: fixed; inset: 0; z-index: 10; transform-origin: 50% 50%; will-change: transform;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 2vh, 20px);
}
.soon.away { opacity: 0; pointer-events: none; }

.word { position: relative; width: min(84vw, 860px); line-height: 0; }
.word::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 120%; height: 190%;
  transform: translate(calc(-50% + var(--gx, 0px)), calc(-50% + var(--gy, 0px))) scale(var(--gs, 1));
  pointer-events: none; z-index: -1; opacity: .85;
  background: radial-gradient(closest-side, rgba(200,214,255,.11) 0%, rgba(170,185,240,.055) 45%, rgba(150,160,220,.02) 70%, transparent 100%);
  filter: blur(20px); transition: opacity .6s;
}
.word img { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 30px rgba(0,0,0,.6)); }
.word img.dof {
  position: absolute; inset: 0; filter: blur(7px); opacity: var(--dofa, 0); pointer-events: none;
  -webkit-mask-image: linear-gradient(var(--dofang, 90deg), transparent 15%, rgba(0,0,0,.7) 55%, #000 100%);
          mask-image: linear-gradient(var(--dofang, 90deg), transparent 15%, rgba(0,0,0,.7) 55%, #000 100%);
}
.word .glint {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("../assets/soon-chrome.webp") center / 100% 100% no-repeat;
          mask: url("../assets/soon-chrome.webp") center / 100% 100% no-repeat;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.75) 50%, transparent 58%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0;
  mix-blend-mode: screen; animation: glint 7s ease-in-out infinite;
}
@keyframes glint { 0%, 55% { background-position: 150% 0; } 85%, 100% { background-position: -50% 0; } }

.word.open { background: none; border: 0; padding: 0; cursor: pointer; display: block; color: inherit;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--sc, 1));
  will-change: transform; }
.word.open:focus { outline: none; }
.word.open:focus-visible { outline: 2px solid var(--moon); outline-offset: 10px; border-radius: 12px; }

/* entrance */
.brand { animation: drop 1.4s var(--ease) both .2s; }
.word-wrap { animation: wake 2.2s var(--ease) both .4s; }
.insta { animation: fadein 1.5s ease both 1.6s; }
@keyframes drop { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes wake { 0% { opacity: 0; filter: blur(24px); transform: scale(.94); } 60% { opacity: 1; } 100% { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.word.open:hover::before { opacity: 1; }
.open:focus-visible, .nav:focus-visible, .close:focus-visible, .dot:focus-visible, .insta:focus-visible {
  outline: 2px solid var(--moon); outline-offset: 4px;
}

/* ---------- Eyelids transition ---------- */
.lid {
  position: fixed; left: -10%; width: 120%; height: 52%; z-index: 50;
  background: #000; pointer-events: none;
  transition: transform .75s var(--ease);
}
.lid.top { top: 0; transform: translateY(-101%); border-radius: 0 0 50% 50% / 0 0 30% 30%; }
.lid.bottom { bottom: 0; transform: translateY(101%); border-radius: 50% 50% 0 0 / 30% 30% 0 0; }
body.blinking .lid.top, body.blinking .lid.bottom { transform: translateY(0); }

/* ---------- Viewer ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 12; opacity: 0; pointer-events: none;
}
.viewer.on { opacity: 1; pointer-events: auto; }
.viewer:not(.on) * { pointer-events: none !important; }

.stage {
  position: absolute; inset: 0; display: grid; place-items: center;
  perspective: 1400px; cursor: grab; touch-action: pan-y;
}
.stage.dragging { cursor: grabbing; }

.track { position: relative; width: min(70vw, 700px); aspect-ratio: 1.3; }

.item {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform .9s var(--ease), opacity .9s var(--ease), filter .9s var(--ease);
}
.item .spin { position: absolute; inset: 0; transform-style: preserve-3d; }
.face {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 30px 40px rgba(0,0,0,.55));
  user-select: none; -webkit-user-drag: none;
}
.face.back { transform: rotateY(180deg); }
.item .shine {
  position: absolute; inset: 8% 10%; pointer-events: none; border-radius: 40%;
  background: radial-gradient(ellipse at 50% 30%, rgba(190,200,255,.18), transparent 60%);
  mix-blend-mode: screen; filter: blur(30px);
}

.floor {
  position: absolute; left: 50%; bottom: 12%; width: min(46vw, 460px); height: 40px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.8), transparent 70%);
  filter: blur(6px); transition: transform .2s;
}

.hud {
  position: absolute; left: 0; right: 0; bottom: clamp(22px, 5vh, 46px);
  display: flex; flex-direction: column; align-items: center; gap: 18px; z-index: 5;
}
.cname {
  font-family: "Pirata One", serif;
  font-size: clamp(30px, 3.4vw, 46px);
  transition: opacity .4s;
}
.dots { display: flex; gap: 14px; }
.dot {
  width: 16px; height: 16px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255,255,255,.25); background: var(--c);
  transition: transform .3s var(--ease), box-shadow .3s;
}
.dot[aria-current="true"] { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(4,5,11,1), 0 0 0 5px rgba(223,229,242,.55); }
.hint { color: var(--dim); font-size: 12px; letter-spacing: .04em; }

.nav {
  position: absolute; top: 50%; z-index: 6; transform: translateY(-50%);
  width: 56px; height: 56px; cursor: pointer; padding: 0;
  background: none; border: 0; color: #fff; display: grid; place-items: center;
  opacity: .75; transition: opacity .3s, transform .4s var(--ease);
}
.nav:hover { opacity: 1; }
.nav.prev:hover { transform: translate(-4px, -50%); }
.nav.next:hover { transform: translate(4px, -50%); }
.nav svg { width: 30px; height: 30px; }
.nav.prev { left: clamp(12px, 4vw, 56px); }
.nav.next { right: clamp(12px, 4vw, 56px); }

.close {
  position: absolute; top: clamp(24px, 4.5vh, 46px); right: clamp(16px, 3vw, 40px); z-index: 25;
  display: flex; align-items: center; gap: 0; padding: 8px; cursor: pointer;
  background: none; border: 0; color: #fff; opacity: .8;
  font: 800 12px/1 "Archivo", sans-serif; letter-spacing: .14em; text-transform: uppercase;
  transition: opacity .35s, gap .45s var(--ease);
}
.close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .45s var(--ease); }
.close-label { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transform: translateX(8px);
  transition: max-width .45s var(--ease), opacity .35s ease, transform .45s var(--ease); }
.close:hover, .close:focus-visible { opacity: 1; gap: 10px; }
.close:hover .close-label, .close:focus-visible .close-label { max-width: 80px; opacity: 1; transform: none; }
.close:hover svg { transform: rotate(90deg); }

.insta {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 11;
  color: var(--dim); font-size: 12px; text-decoration: none; letter-spacing: .06em;
  transition: color .3s, opacity .6s;
}
.insta:hover { color: var(--moon); }
body.viewing .insta { visibility: hidden; }

@media (max-width: 640px) {
  .track { width: 92vw; }
  .nav { width: 46px; height: 46px; top: auto; bottom: 120px; transform: none; }
  .hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- 3D shirt ---------- */
.track3d { position: absolute; left: 50%; top: 50%; width: 100vw; height: 100vh; transform: translate(-50%, -50%); pointer-events: none; z-index: 4; }
.track3d .shirt3d { width: 100%; height: 100%; display: block; }
body.has3d .floor { display: none; }
body.has3d .item.center .spin, body.has3d .item.center .shine { opacity: 0; transition: opacity .5s ease; }
body.has3d.switching .item.center .spin { opacity: 1; }
body.switching .track3d { opacity: 0; }
@media (max-width: 640px) { .track3d { width: 92vw; } }

.hud { display: none; }

body.has3d .track { visibility: hidden; }
@media (max-width: 640px) { body .track3d { width: 100vw; } }

.word .ghost { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; opacity: 0; will-change: transform, opacity; }