/* =========================================================
   Lunefee — brand site
   White / black / grey, pale-blue accent. Refined sans.
   Motion: smooth scroll, staggered reveals, parallax, marquee.
   ========================================================= */

:root{
  /* neutrals */
  --ink:#111111;
  --ink-soft:#3b3b3b;
  --paper:#fafafa;
  --paper-dim:#f0f0f0;
  --paper-dim2:#e9e9e9;
  --gray:#787878;
  --gray-light:#b6b6b6;
  --hairline:#e6e6e6;
  --white:#ffffff;
  --bubble-bg:#ffffff;

  /* accent — pale blue, used sparingly */
  --accent:#d6ebf2;
  --accent-mid:#b7dce8;
  --accent-deep:#8bbccc;

  /* type */
  --sans-latin:"Jost", "Inter", system-ui, -apple-system, sans-serif;
  --sans-body:"Inter", system-ui, -apple-system, sans-serif;
  --sans-ja:"Zen Kaku Gothic New", system-ui, sans-serif;
  --sans-ko:"Noto Sans KR", system-ui, sans-serif;
  --label:"Jost", "Inter", system-ui, sans-serif;

  --font-head:var(--sans-latin);   /* headings are English-only → always Jost */
  --font-body:var(--sans-body);

  /* motion */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);

  --maxw:1180px;
  --gutter:clamp(1.25rem, 5vw, 4rem);
  --section-y:clamp(5rem, 12vw, 9rem);
  --nav-h:5.5rem;
}

/* night theme: token swap + the few places that hard-code a light value ---- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --ink:#ececee;
  --ink-soft:#c3c5cb;
  --paper:#0c0d11;
  --paper-dim:#15171c;
  --paper-dim2:#1b1e24;
  --gray:#9a9da6;
  --gray-light:#6c7079;
  --hairline:#23262d;
  --bubble-bg:#181b21;
  --accent-deep:#9ccadb;
}
:root[data-theme="dark"] body{ transition:background .6s var(--ease), color .6s var(--ease); }
:root[data-theme="dark"] ::selection{ color:#0c0d11; }
:root[data-theme="dark"] .nav.is-scrolled{ background:rgba(12,13,17,.78); }
:root[data-theme="dark"] .intro{ background-color:#1a1f2a; }
:root[data-theme="dark"] .intro::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,10,18,.72), rgba(10,12,20,.82));
}
:root[data-theme="dark"] .intro span{ position:relative; color:#f2f3f6; text-shadow:0 2px 24px rgba(10,14,26,.9); }
:root[data-theme="dark"] .hero{ background:#11141c; }
:root[data-theme="dark"] .hero::before{ filter:brightness(.34) saturate(.6) contrast(1.08); }
:root[data-theme="dark"] .hero::after{
  background:linear-gradient(180deg,
    rgba(14,18,32,.35) 0%,
    rgba(12,14,24,.30) 40%,
    rgba(12,13,17,.70) 82%,
    rgba(12,13,17,1) 100%);
}
:root[data-theme="dark"] .hero__logo{
  filter:brightness(0) invert(1) drop-shadow(0 6px 40px rgba(170,205,230,.45));
  animation-name:heroRise, logoGlowNight;
}
:root[data-theme="dark"] .hero__tagline{ text-shadow:0 1px 20px rgba(8,10,18,.8); }
:root[data-theme="dark"] .hero__sub{ color:#b9bec8; text-shadow:0 1px 14px rgba(8,10,18,.8); }
:root[data-theme="dark"] .hero__scroll{ background:rgba(236,236,238,.18); }
:root[data-theme="dark"] .section--collection{ background:#14161b; color:var(--ink); }
:root[data-theme="dark"] .section--collection .section__label{ color:var(--gray-light); }
:root[data-theme="dark"] .section--collection .body{ color:var(--gray-light); }
:root[data-theme="dark"] .card{ border-color:rgba(250,250,250,.22); background:transparent; }
:root[data-theme="dark"] .card:hover{ background:rgba(250,250,250,.05); border-color:rgba(250,250,250,.5); }
:root[data-theme="dark"] .card:hover .card__no{ color:var(--accent); }
:root[data-theme="dark"] .chara__fig::before{      /* soft moonlight so Lune doesn't sink into the dark */
  content:""; position:absolute; inset:-8% -4% 4%; z-index:-1;
  background:radial-gradient(ellipse at 50% 55%, rgba(200,220,240,.13), transparent 68%);
}
:root[data-theme="dark"] .chara__fig{ isolation:isolate; }
@media (prefers-reduced-motion:no-preference){
  :root[data-theme="dark"] .hero::before{ transition:filter .8s var(--ease); }
}

/* language-driven body typography (only the switchable sentences use it) */
body.lang-en{ --font-body:var(--sans-body); }
body.lang-ja{ --font-body:var(--sans-ja); }
body.lang-ko{ --font-body:var(--sans-ko); }

/* reset ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:6rem;
  -webkit-text-size-adjust:100%;
  color-scheme:light;
}
img{ display:block; max-width:100%; height:auto; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

body{
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.85;
  font-weight:400;
  letter-spacing:.015em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--accent); color:var(--ink); }

/* Lenis smooth scroll */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }
.lenis.lenis-smooth iframe{ pointer-events:none; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:2000;
  background:var(--ink); color:var(--paper); padding:.6em 1em; font-size:.8rem;
}
.skip-link:focus{ left:.5rem; top:.5rem; }

/* intro veil ----------------------------------------------------------- */
.intro{
  position:fixed; inset:0; z-index:1500;
  display:grid; place-items:center;
  background:#eef0f3 url("../img/clouds.webp") center/cover no-repeat;
  animation:introOut 1.1s 3.4s var(--ease) forwards;   /* JS-independent fallback */
}
.intro span{
  font-family:var(--label);
  font-size:clamp(1.4rem,4vw,2rem);
  font-weight:400;
  letter-spacing:.5em;
  text-indent:.5em;
  color:var(--ink);
  text-shadow:0 2px 24px rgba(250,250,250,.92);
  opacity:0;
  animation:introMark 2s .15s var(--ease) forwards;
}
.intro--gone{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity 1s var(--ease), visibility 1s; }
@keyframes introMark{
  0%{ opacity:0; letter-spacing:.9em; }
  40%{ opacity:1; }
  100%{ opacity:1; letter-spacing:.5em; }
}
@keyframes introOut{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* shared bits -------------------------------------------------------- */
.section__label{
  font-family:var(--label);
  font-size:.68rem; font-weight:400;
  letter-spacing:.44em; text-transform:uppercase;
  color:var(--gray); margin-bottom:1.5rem;
}
.section__label::before{
  content:""; display:inline-block; width:1.8rem; height:1px;
  background:var(--accent-deep); vertical-align:middle; margin-right:1rem;
  transform:translateY(-.15em);
}
.section__title{
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(1.5rem, 4vw, 2.7rem);
  line-height:1.4;
  letter-spacing:.005em;
  margin-bottom:2rem;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
.lead{
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(1.1rem, 2.2vw, 1.45rem);
  line-height:1.95;
  letter-spacing:.03em;
  margin-bottom:1.5rem;
  color:var(--ink-soft);
}
.body{ max-width:46ch; color:var(--ink-soft); font-size:.95rem; font-weight:400; }
.body--center{ margin-inline:auto; text-align:center; }
.note{ margin-top:2rem; font-size:.78rem; color:var(--gray); letter-spacing:.16em; }

.btn{
  --btn-fg:var(--ink);
  --btn-bd:var(--ink);
  display:inline-block;
  font-family:var(--label);
  font-size:.7rem; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  padding:1.15em 2.7em;
  position:relative; overflow:hidden;
  transition:color .5s var(--ease), border-color .5s var(--ease);
  z-index:0;
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--btn-bd);
  transform:translateY(101%);
  transition:transform .55s var(--ease);
}
.btn:hover{ color:var(--paper); }
.btn:hover::after{ transform:translateY(0); }
.btn:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:3px; }
.btn--dark{ margin-top:3rem; }   /* collection CTA — same ink button as elsewhere now the band is light */

/* nav --------------------------------------------------------------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; gap:2rem;
  padding:1.6rem var(--gutter);
  transition:transform .55s var(--ease), background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.is-scrolled{
  background:rgba(250,250,250,.82);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding-top:1rem; padding-bottom:1rem;
  border-bottom-color:var(--hairline);
}
.nav--hidden{ transform:translateY(-100%); }

.nav__brand{ margin-right:auto; }
.nav__wordmark{
  font-family:var(--label);
  font-size:1.25rem; font-weight:400; letter-spacing:.24em; text-indent:.24em;
}
.nav__links{ display:flex; align-items:center; gap:2rem; }
.nav__links a{
  font-family:var(--label);
  font-size:.7rem; font-weight:400; letter-spacing:.22em; text-transform:uppercase; color:var(--gray);
  position:relative; transition:color .35s var(--ease);
}
.nav__links a:not(.nav__shop)::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--accent-deep); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav__links a:not(.nav__shop):hover{ color:var(--ink); }
.nav__links a:not(.nav__shop):hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__shop{
  color:var(--ink) !important;
  border:1px solid var(--ink);
  padding:.7em 1.5em;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.nav__shop:hover{ background:var(--ink); color:var(--paper) !important; }

.lang{ display:flex; align-items:center; gap:.45rem; font-family:var(--label); }
.lang button{
  font-size:.68rem; letter-spacing:.16em; color:var(--gray-light);
  padding:.2em; transition:color .3s var(--ease);
}
.lang button:hover{ color:var(--gray); }
.lang button.is-active{ color:var(--ink); }
.lang span{ color:var(--gray-light); font-size:.68rem; }

.theme-toggle{
  display:grid; place-items:center;
  width:2.1rem; height:2.1rem; margin-left:-.6rem;
  color:var(--gray); border-radius:50%;
  transition:color .3s var(--ease), background .3s var(--ease);
}
.theme-toggle:hover{ color:var(--ink); background:var(--paper-dim); }
.theme-toggle:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.theme-toggle svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle__sun{ display:none; }
:root[data-theme="dark"] .theme-toggle__moon{ display:none; }
:root[data-theme="dark"] .theme-toggle__sun{ display:block; }

/* burger + mobile menu (≤880px) ----------------------------------- */
.burger{ display:none; }
.menu{ display:none; }

@media (max-width:880px){
  .burger{
    display:grid; place-content:center; gap:7px;
    width:2.5rem; height:2.5rem; margin-right:-.5rem;
    -webkit-tap-highlight-color:transparent;
  }
  .burger span{
    display:block; width:22px; height:1px; background:var(--ink);
    transition:translate .45s var(--ease), rotate .45s var(--ease);
  }
  .burger[aria-expanded="true"] span:first-child{ translate:0 4px; rotate:45deg; }
  .burger[aria-expanded="true"] span:last-child{ translate:0 -4px; rotate:-45deg; }
  .burger:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }

  .menu{
    position:fixed; inset:0; z-index:990;           /* under the header, which stays on top */
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:2.6rem;
    padding:6rem var(--gutter) 3rem;
    background:var(--paper);
    opacity:0; visibility:hidden;
    transition:opacity .5s var(--ease), visibility 0s .5s;
    overflow-y:auto;
  }
  .menu[hidden]{ display:none; }
  .menu.is-open{ opacity:1; visibility:visible; transition:opacity .5s var(--ease), visibility 0s; }
  .menu__links{ display:flex; flex-direction:column; align-items:center; gap:1.3rem; }
  .menu__links a{
    font-family:var(--label); font-weight:400;
    font-size:1.35rem; letter-spacing:.26em; text-indent:.26em; text-transform:uppercase;
    color:var(--ink);
  }
  .menu__links a,
  .menu__shop,
  .menu__sns{
    opacity:0; translate:0 14px;
    transition:opacity .6s var(--ease), translate .6s var(--ease);
  }
  .menu.is-open .menu__links a,
  .menu.is-open .menu__shop,
  .menu.is-open .menu__sns{ opacity:1; translate:0 0; }
  .menu.is-open .menu__links a:nth-child(1){ transition-delay:.06s; }
  .menu.is-open .menu__links a:nth-child(2){ transition-delay:.11s; }
  .menu.is-open .menu__links a:nth-child(3){ transition-delay:.16s; }
  .menu.is-open .menu__links a:nth-child(4){ transition-delay:.21s; }
  .menu.is-open .menu__links a:nth-child(5){ transition-delay:.26s; }
  .menu.is-open .menu__shop{ transition-delay:.32s; }
  .menu.is-open .menu__sns{ transition-delay:.38s; }
  .menu__sns{ display:flex; gap:1.6rem; }
  .menu__sns a{
    font-family:var(--label); font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gray);
  }
  body.menu-open{ overflow:hidden; }
  body.menu-open .nav{ background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* today's moon (in the hero sky) ---------------------------------------- */
.moon{
  position:fixed; z-index:900;                     /* above content, under the header + menu */
  right:clamp(1rem, 3vw, 2.4rem); bottom:clamp(1rem, 3vw, 2.2rem);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  pointer-events:none;
  animation:heroFade 1.6s var(--ease) 3.6s both;
  /* small frosted card so it stays legible over clouds, white or the dark band */
  padding:.85rem 1rem .75rem;
  border-radius:1.1rem;
  border:1px solid var(--hairline);
  background:rgba(250,250,250,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
:root[data-theme="dark"] .moon{ background:rgba(16,18,24,.66); }
.moon[hidden]{ display:none; }
.moon__disc{
  width:clamp(40px, 4vw, 54px); height:auto; overflow:visible;
  /* a daytime moon: pale, with a faint blue-grey halo so it reads against white cloud */
  filter:drop-shadow(0 2px 10px rgba(80,100,135,.28)) drop-shadow(0 0 18px rgba(255,255,255,.8));
}
.moon__shadow{ fill:rgba(120,136,162,.13); stroke:rgba(120,136,162,.22); stroke-width:.6; }
.moon__label{ display:flex; flex-direction:column; align-items:center; gap:.2rem; text-align:center; }
.moon__kicker{
  font-family:var(--label); font-size:.54rem; letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
  color:#6f747c;
}
.moon__name{
  font-size:.68rem; letter-spacing:.1em; color:#4f545b;
}
:root[data-theme="dark"] .moon__disc{ filter:drop-shadow(0 0 22px rgba(200,225,248,.55)); opacity:1; }
:root[data-theme="dark"] .moon__shadow{ fill:rgba(160,180,210,.10); stroke:rgba(200,220,245,.18); }
:root[data-theme="dark"] .moon__kicker{ color:#8e96a3; text-shadow:none; }
:root[data-theme="dark"] .moon__name{ color:#c9cfd8; text-shadow:none; }

/* hero ------------------------------------------------------------ */
.hero{
  --px:0; --py:0;                 /* pointer offset, set by JS (px) */
  position:relative;
  min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  padding:7rem var(--gutter) 5rem;
  overflow:hidden;
  background:#e8ebef;
  isolation:isolate;
}
.hero::before{                    /* drifting sky */
  content:""; position:absolute; inset:0; z-index:0;
  background:#e8ebef url("../img/clouds.webp") center 80% / cover no-repeat;
  transform:scale(1.05);
  translate:calc(var(--px) * 1px) calc(var(--py) * 1px);
  transition:translate .25s ease-out;
  animation:skyDrift 52s ease-in-out infinite alternate;
  will-change:transform, translate;
}
.hero::after{                     /* airy scrim: holds type legible, melts into the page */
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,
    rgba(249,249,250,.06) 0%,
    rgba(249,249,250,.16) 40%,
    rgba(250,250,250,.58) 82%,
    rgba(250,250,250,1) 100%);
}
.hero__stardust{
  position:absolute; inset:0; width:100%; height:100%; z-index:2;
  will-change:transform;
}
.hero__inner{
  position:relative; z-index:3;
  text-align:center;
  max-width:660px;
}

/* first-view choreography: content rises after the intro veil lifts */
.hero__tagline,
.hero__sub,
.hero .btn{
  animation:heroRise 1.2s var(--ease) both;
}
.hero__tagline{ animation-delay:3.12s; }
.hero__sub{ animation-delay:3.28s; }
.hero .btn{ animation-delay:3.44s; }

.hero__logo{
  width:min(430px, 76vw);
  margin:0 auto 2.2rem;
  will-change:transform, filter;
  /* black keyed mark → rendered white; glow breathes once it has settled */
  filter:brightness(0) invert(1) drop-shadow(0 6px 34px rgba(96,116,148,.30));
  animation:heroRise 1.2s var(--ease) 2.9s both,
            logoGlow 7.5s ease-in-out 4.4s infinite;
}
.hero__tagline{
  font-family:var(--font-head);
  font-weight:400;
  font-size:clamp(1.6rem, 4.6vw, 2.6rem);
  letter-spacing:.01em;
  line-height:1.5;
  margin-bottom:1.2rem;
  text-shadow:0 1px 20px rgba(250,250,250,.85);
}
.hero__sub{
  font-size:.85rem; color:#54585f;
  letter-spacing:.1em; line-height:1.95;
  margin-bottom:2.8rem;
  text-shadow:0 1px 14px rgba(250,250,250,.8);
}
.hero__scroll{
  position:absolute; left:50%; bottom:2.2rem; translate:-50% 0; z-index:3;
  width:1px; height:60px; background:rgba(20,20,20,.16); overflow:hidden;
  animation:heroFade 1.2s var(--ease) 3.7s both;
}
.hero__scroll span{
  position:absolute; inset:0; display:block; background:var(--accent-deep);
  animation:scrollLine 2.6s var(--ease) infinite;
}

@keyframes heroRise{
  from{ opacity:0; translate:0 30px; }
  to{ opacity:1; translate:0 0; }
}
@keyframes heroFade{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes skyDrift{
  from{ transform:scale(1.05) translate(-1.5%, -0.9%); }
  to{ transform:scale(1.05) translate(1.5%, 0.9%); }
}
@keyframes logoGlowNight{
  0%,100%{ filter:brightness(0) invert(1) drop-shadow(0 6px 34px rgba(160,195,225,.34)); }
  50%{ filter:brightness(0) invert(1) drop-shadow(0 6px 56px rgba(190,220,245,.62)); }
}
@keyframes logoGlow{
  0%,100%{ filter:brightness(0) invert(1) drop-shadow(0 6px 30px rgba(120,140,170,.26)); }
  50%{ filter:brightness(0) invert(1) drop-shadow(0 6px 48px rgba(150,182,208,.52)); }
}

/* marquee ------------------------------------------------------- */
.marquee{
  overflow:hidden;
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  padding:1.5rem 0;
}
/* spacing lives on each item (not `gap`) so the duplicated halves are exactly
   equal and the -50% loop has no jump at the seam */
.marquee__track{
  --mq-gap:2.8rem;
  display:flex; align-items:center;
  width:max-content;
  animation:marquee 30s linear infinite;
}
@media (hover:hover){ .marquee:hover .marquee__track{ animation-play-state:paused; } }  /* avoid sticky tap-hover freezing it on phones */
.marquee__track span{
  font-family:var(--label);
  font-size:.78rem; font-weight:400;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--gray); white-space:nowrap;
}
.marquee__track > *{ margin-right:var(--mq-gap); }
.marquee__track .star{ color:var(--accent-deep); letter-spacing:0; }

/* sections --------------------------------------------------- */
.section{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:var(--section-y) var(--gutter);
}
.section--concept{ text-align:center; }
.section--concept .body{
  margin-inline:auto; text-align:center;
  max-width:min(42em, 100%);
  white-space:pre-line;          /* honour authored line breaks in the concept copy */
}
.section--collection, .section--social{ text-align:center; }

/* full-bleed pale-grey band */
.section--collection{
  max-width:none;
  background:#ededee;
  color:var(--ink);
  padding-block:clamp(4rem, 9vw, 6.5rem);   /* tighter than the light sections */
}
.section--collection .section__label{ color:var(--gray); }
.section--collection .section__label::before{ background:var(--accent-deep); }
.section--collection .body{ color:var(--ink-soft); }
.section--collection .section__title,
.section--collection .body,
.section--collection .btn{ max-width:var(--maxw); margin-inline:auto; }
.section--collection .cards{ margin-inline:auto; }

/* lookbook — editorial layout ------------------------------
   12-col grid with deliberate overlaps; frames wipe open top→down,
   photos drift inside their frames (main.js sets --shift), tap = lightbox */
.lb{
  position:relative;
  max-width:860px; margin:1rem auto 0;
  display:grid;
  grid-template-columns:repeat(12, minmax(0, 1fr));
  column-gap:clamp(.6rem, 1.6vw, 1.25rem);
}
.lb__side{
  position:absolute; left:-3.2rem; top:.2rem;
  writing-mode:vertical-rl;
  font-family:var(--label); font-size:.58rem;
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--gray-light); white-space:nowrap;
}
.lb__item{ position:relative; margin:0; }
.lb__item--1{ grid-column:1 / 9;  grid-row:1; z-index:1; }
.lb__item--2{ grid-column:8 / 12; grid-row:1; z-index:2; align-self:end; margin-bottom:-9rem; }
.lb__item--3{ grid-column:2 / 6;  grid-row:2; margin-top:5rem; isolation:isolate; }
.lb__item--4{ grid-column:6 / 13; grid-row:3; margin-top:-10rem; }

.lb__frame{
  position:relative; display:block; width:100%;
  padding:0; border:0; margin:0;
  background:linear-gradient(150deg, var(--paper-dim), var(--paper-dim2));
  overflow:hidden; cursor:zoom-in;
  aspect-ratio:1748/1240;
  -webkit-tap-highlight-color:transparent;
}
.lb__item--2 .lb__frame{ aspect-ratio:3/4; }
.lb__item--3 .lb__frame{
  aspect-ratio:2/3;
  border-radius:50% 50% 0 0 / 33.34% 33.34% 0 0;   /* true semicircle arch */
}
/* hairline echo of the arch, offset behind it */
.lb__item--3::before{
  content:""; position:absolute; z-index:-1;
  inset:0 0 auto 0;
  aspect-ratio:2/3;
  border:1px solid var(--hairline);
  border-bottom:0;
  border-radius:50% 50% 0 0 / 33.34% 33.34% 0 0;
  translate:.8rem -.8rem;
  pointer-events:none;
}
.lb__frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:scale 1.3s var(--ease);
}
.lb__frame .lb__px{ inset:-8% 0 auto; height:116%; transform:translate3d(0, var(--shift, 0%), 0); will-change:transform; }
.lb__item--3 img{ object-position:50% 72%; }
.lb__frame::after{
  content:""; position:absolute; inset:0;
  background:var(--accent); mix-blend-mode:multiply;
  opacity:0; transition:opacity .6s var(--ease);
}
.lb__frame:hover img{ scale:1.04; }
.lb__frame:hover::after{ opacity:.16; }
.lb__frame:focus-visible{ outline:none; }
.lb__item:has(.lb__frame:focus-visible){ outline:1px solid var(--accent-deep); outline-offset:6px; }

.lb__item figcaption{
  margin-top:.8rem;
  font-family:var(--label); font-size:.6rem;
  letter-spacing:.36em; text-transform:uppercase;
  color:var(--gray);
  display:flex; align-items:center; gap:.9rem;
}
.lb__item figcaption span{ color:var(--accent-deep); letter-spacing:.14em; }
.lb__item figcaption span::after{
  content:""; display:inline-block; width:1.4rem; height:1px; margin-left:.9rem;
  background:currentColor; vertical-align:middle; opacity:.7;
}
.lb__item--2 figcaption{ justify-content:flex-end; }

/* wipe reveal (only when JS + motion allowed adds .lb--motion) */
.lb--motion .lb__frame{
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.4s var(--ease);
}
.lb--motion .lb__frame img{ scale:1.18; transition:scale 1.8s var(--ease); }
.lb--motion figcaption{ opacity:0; translate:0 8px; transition:opacity .9s var(--ease) .5s, translate .9s var(--ease) .5s; }
.lb--motion .is-in .lb__frame{ clip-path:inset(0 0 0 0); }
.lb--motion .is-in .lb__frame img{ scale:1; }
.lb--motion .is-in .lb__frame:hover img{ scale:1.04; transition-duration:1.3s; }
.lb--motion .is-in figcaption{ opacity:1; translate:0 0; }
.lb--motion .lb__item--3::before{ opacity:0; transition:opacity 1.2s var(--ease) .6s; }
.lb--motion .lb__item--3.is-in::before{ opacity:1; }

/* lightbox */
.lightbox{
  width:100%; height:100%; max-width:none; max-height:none;
  margin:0; padding:clamp(1rem, 4vw, 3rem); border:0;
  background:transparent; color:#ececee;
  display:none; place-items:center;
  overscroll-behavior:contain;
}
.lightbox[open]{ display:grid; animation:lbIn .5s var(--ease); }
.lightbox::backdrop{ background:rgba(10,11,14,.9); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.lightbox__fig{ position:relative; margin:0; width:fit-content; animation:lbImg .7s var(--ease); }
.lightbox__img{
  display:block;
  max-width:min(1200px, 100%); max-height:calc(100dvh - 6rem);
  width:auto; height:auto; object-fit:contain;
  box-shadow:0 0 0 1px rgba(236,236,238,.08), 0 30px 80px rgba(0,0,0,.5);
}

/* iOS-style glass: frosted + saturated backdrop, bright rim, soft inner light.
   Tinted slightly dark so white text stays legible over pale clouds too. */
.glass{
  background:
    linear-gradient(160deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,.12) 100%),
    rgba(28,30,36,.22);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,.34);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(255,255,255,.14),
    inset 0 0 18px rgba(255,255,255,.08),
    0 10px 30px rgba(0,0,0,.28);
  color:#fff;
}
.lightbox__close{
  position:absolute; top:.9rem; right:.9rem;
  width:2.6rem; height:2.6rem; display:grid; place-items:center;
  padding:0; border-radius:50%; cursor:pointer;
  transition:scale .4s var(--ease), background-color .3s;
}
.lightbox__close:hover{ scale:1.08; }
.lightbox__close:active{ scale:.94; }
.lightbox__close:focus-visible{ outline:2px solid rgba(255,255,255,.8); outline-offset:3px; }
.lightbox__close svg{ width:.95rem; height:.95rem; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; fill:none; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.lightbox__cap{
  position:absolute; left:50%; bottom:1rem; translate:-50% 0;
  padding:.62rem 1.25rem .6rem 1.45rem; border-radius:999px;
  font-family:var(--label); font-size:.6rem;
  letter-spacing:.4em; text-transform:uppercase; white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
}
.lightbox__cap:empty{ display:none; }
@media (max-width:600px){
  .lightbox__close{ top:.6rem; right:.6rem; width:2.3rem; height:2.3rem; }
  .lightbox__cap{ bottom:.6rem; font-size:.52rem; letter-spacing:.3em; padding:.5rem 1rem .48rem 1.15rem; }
}
@keyframes lbIn{ from{ opacity:0; } }
@keyframes lbImg{ from{ opacity:0; scale:.96; } }

/* collection cards -------------------------------------- */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(.7rem, 2vw, 1.6rem);
  margin-top:3rem;
  max-width:840px;
}
.card{
  position:relative;
  aspect-ratio:3/4;
  border:1px solid rgba(17,17,17,.18);
  background:rgba(255,255,255,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.9rem;
  transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease);
}
.card:hover{ background:rgba(255,255,255,.75); border-color:rgba(17,17,17,.4); transform:translateY(-6px); }
.card__no{
  font-family:var(--label); font-size:1.8rem; font-weight:300;
  color:var(--ink); letter-spacing:.16em; text-indent:.16em;
  transition:color .5s var(--ease);
}
.card:hover .card__no{ color:var(--accent-deep); }
.card__soon{
  font-family:var(--label);
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gray);
}
:root[data-theme="dark"] .card__soon{ color:var(--gray-light); }

/* photo cards: photo on top, caption underneath so it never covers the item */
.card--photo{ aspect-ratio:auto; justify-content:flex-start; gap:0; padding:.55rem .55rem 0; }
.card__photo{ display:block; width:100%; aspect-ratio:3/4; overflow:hidden; background:#e4e5e7; }
.card__img{
  display:block; width:100%; height:100%; object-fit:cover;
  transition:scale 1.2s var(--ease), filter 1.2s var(--ease);
}
.card--photo:hover .card__img{ scale:1.05; filter:brightness(1.04); }
.card__meta{
  display:flex; flex-direction:column; align-items:center; gap:.3rem;
  padding:1rem .5rem 1.15rem;
}
.card--photo .card__no{ font-size:.95rem; }
.card__name{ font-family:var(--label); font-size:.8rem; font-weight:400; letter-spacing:.12em; color:var(--ink); }
.card--photo .card__soon{ font-size:.5rem; }

/* characters ----------------------------------------- */
.section--characters{ text-align:center; border-top:1px solid var(--hairline); }
.charas{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(2.5rem, 6vw, 5rem);
  margin-top:clamp(1.5rem, 4vw, 3rem);
}
.chara__fig{ position:relative; margin:0 0 2.8rem; }
.chara__talk{
  display:block; width:100%; position:relative;
  border-radius:1.5rem; -webkit-tap-highlight-color:transparent;
}
.chara__talk:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:6px; }
.chara__fig img{
  display:block; width:78%; height:auto; margin-inline:auto;      /* a little smaller than the column */
  transition:transform .8s var(--ease);
  animation:charaFloat 5.6s ease-in-out infinite;     /* Lune: slow, quiet drift */
}
.chara__talk[data-chara="fee"] img{
  animation:charaBounce 3.2s ease-in-out infinite;    /* Fee: livelier bob */
}
.chara:hover .chara__fig img{ transform:translateY(-6px); }
.chara__talk.is-hop{ animation:charaHop .62s var(--ease); }
/* 3D figure (model-viewer): same visual height as the drawings next to it */
.chara__fig--3d{ display:flex; flex-direction:column; align-items:center; }
/* keep both figures the same height so the names and profiles line up */
.charas .chara__fig{ min-height:calc(clamp(220px, 23vw, 280px) + 2.6rem); display:flex; flex-direction:column; justify-content:center; }
.chara__model{
  display:block; width:100%; height:clamp(220px, 23vw, 280px);   /* wide fov → figure sits small with room for its shadow */
  background:transparent; --poster-color:transparent; --progress-bar-color:var(--accent-deep);
  cursor:grab; outline:none;
}
.chara__model:active{ cursor:grabbing; }
.chara__model:not(:defined){ background:center/contain no-repeat; }
.chara__model[data-chara="fee"]:not(:defined){ background-image:url("../img/fee_3d_poster.webp"); }
.chara__model[data-chara="lune"]:not(:defined){ background-image:url("../img/lune_3d_poster.webp"); }   /* before the 3D script arrives */
.chara__model:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:4px; border-radius:1.5rem; }
.chara__hint--btn{ cursor:pointer; padding:.3em .6em; border-radius:999px; transition:color .3s var(--ease); }
.chara__hint--btn:hover{ color:var(--gray); }
.chara__talk[data-chara="lune"].is-hop{ animation:charaShy .8s var(--ease); }

@keyframes charaFloat{
  0%,100%{ translate:0 0; }
  50%{ translate:0 -7px; }
}
@keyframes charaBounce{
  0%,100%{ translate:0 0; rotate:0deg; }
  30%{ translate:0 -10px; rotate:-.8deg; }
  60%{ translate:0 -3px; rotate:.6deg; }
}
@keyframes charaHop{
  0%{ transform:translateY(0) scale(1); }
  35%{ transform:translateY(-18px) scale(1.02, .98); }
  70%{ transform:translateY(0) scale(1.03, .97); }
  100%{ transform:translateY(0) scale(1); }
}
@keyframes charaShy{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px) rotate(-1deg); }
  60%{ transform:translateX(3px) rotate(.6deg); }
}

.chara__bubble{
  position:absolute; left:50%; bottom:calc(100% - .4rem); z-index:2;
  width:max-content; max-width:min(19rem, 88%);
  padding:.75em 1.25em;
  font-size:.86rem; line-height:1.7; color:var(--ink-soft);
  background:var(--bubble-bg); border:1px solid var(--hairline); border-radius:1.4em;
  box-shadow:0 10px 30px -14px rgba(40,50,70,.35);
  opacity:0; translate:-50% 8px; scale:.96;
  transition:opacity .45s var(--ease), translate .45s var(--ease), scale .45s var(--ease);
  pointer-events:none;
}
.chara__bubble::after{               /* little tail */
  content:""; position:absolute; left:50%; top:100%;
  width:12px; height:12px; margin:-6px 0 0 -6px;
  background:inherit; border:inherit; border-top:0; border-left:0;
  rotate:45deg;
}
.chara__bubble.is-on{ opacity:1; translate:-50% 0; scale:1; }
.chara__bubble:empty{ display:none; }
.chara__hint{
  display:block; margin-top:.9rem;
  font-family:var(--label);
  font-size:.58rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gray-light);
}
.chara__spark{
  position:absolute; left:var(--sx); top:var(--sy); z-index:3;
  color:var(--accent-deep); font-size:var(--ss, 14px); line-height:1;
  pointer-events:none;
  animation:spark .9s var(--ease-out) forwards;
}
@keyframes spark{
  from{ opacity:1; translate:-50% -50%; scale:.4; }
  to{ opacity:0; translate:calc(-50% + var(--dx)) calc(-50% + var(--dy)); scale:1.1; }
}
.chara__name{
  font-family:var(--font-head); font-weight:400;
  font-size:clamp(1.4rem, 3vw, 1.9rem); letter-spacing:.24em; text-indent:.24em;
  margin-bottom:1.6rem;
}
.chara__profile{ max-width:30em; margin:0 auto; }
.chara__profile dt{
  font-family:var(--label);
  font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gray);
  margin-bottom:.5rem;
}
.chara__profile dt::before{ content:"\2726"; color:var(--accent-deep); letter-spacing:0; margin-right:.6em; }
.chara__profile dd{ margin:0 0 1.4rem; color:var(--ink-soft); font-size:.92rem; text-wrap:pretty; word-break:auto-phrase; }
.chara__profile dd:last-child{ margin-bottom:0; }

/* social --------------------------------------------- */
.section--social{ border-top:1px solid var(--hairline); }
.section--social .section__title{ font-family:var(--label); font-weight:400; letter-spacing:.14em; }
.social-links{
  list-style:none; margin:2.6rem 0 0; padding:0;
  display:flex; justify-content:center; flex-wrap:wrap; gap:1.6rem 1.2rem;
}
.social-links li{ display:flex; flex-direction:column; align-items:center; gap:.85rem; }
.social-links .btn{ min-width:12.5rem; text-align:center; }
.social-links__handle{
  font-family:var(--label);
  font-size:.62rem; letter-spacing:.18em; color:var(--gray);
}

/* footer ------------------------------------------- */
.footer{
  border-top:1px solid var(--hairline);
  padding:clamp(3rem, 8vw, 5rem) var(--gutter);
  text-align:center;
}
.footer__wordmark{
  font-family:var(--label);
  font-size:1.4rem; font-weight:400; letter-spacing:.32em; text-indent:.32em;
  margin-bottom:1.7rem;
}
.footer__links{
  display:flex; justify-content:center; flex-wrap:wrap; gap:1.8rem;
  margin-bottom:1.9rem;
}
.footer__links a{
  font-family:var(--label);
  font-size:.66rem; font-weight:400; letter-spacing:.26em; text-transform:uppercase; color:var(--gray);
  position:relative; transition:color .35s var(--ease);
}
.footer__links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-5px; height:1px;
  background:var(--accent-deep); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--ease);
}
.footer__links a:hover{ color:var(--ink); }
.footer__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.footer__copy{
  font-family:var(--label);
  font-size:.64rem; letter-spacing:.22em; color:var(--gray-light);
}

/* reveal / stagger -------------------------------
   uses the independent `translate` property so it composes with any
   `transform` already on the element (editorial offset, hover lift, parallax) */
.anim{
  opacity:0;
  translate:0 26px;
  transition:opacity 1s var(--ease), translate 1s var(--ease);
}
.anim-in .anim{ opacity:1; translate:0 0; }

/* keyframes ------------------------------------- */
@keyframes scrollLine{
  0%{ transform:translateY(-100%); }
  50%{ transform:translateY(0); }
  100%{ transform:translateY(100%); }
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* responsive --------------------------------- */
@media (max-width:1000px){
  .lb__side{ display:none; }
}

/* tablet / large phone: nav wraps to two rows */
@media (max-width:880px){
  .nav{ gap:1rem; padding:1rem var(--gutter); }
  .nav__brand{ margin-right:auto; }
  .nav__links{ display:none; }
  .nav.is-scrolled{ padding:.75rem var(--gutter); }
  .theme-toggle{ margin-left:-.4rem; }
  .moon{ gap:.35rem; padding:.55rem .7rem .5rem; border-radius:.9rem; }
  .moon__disc{ width:28px; }
  .moon__kicker{ display:none; }
  .moon__name{ font-size:.58rem; letter-spacing:.06em; }
  :root{ --section-y:clamp(4rem, 11vw, 7.5rem); }
}

/* phone */
@media (max-width:600px){
  :root{ --nav-h:4.5rem; }

  .lb__item--1{ grid-column:1 / 12; }
  .lb__item--2{ grid-column:6 / 13; grid-row:2; align-self:start; margin:-2.5rem 0 0; }
  .lb__item--3{ grid-column:1 / 6; grid-row:2; margin-top:3.5rem; }
  .lb__item--3::before{ translate:.45rem -.45rem; }
  .lb__item--4{ grid-column:2 / 13; grid-row:3; margin-top:2.5rem; }
  .lb__item figcaption{ font-size:.54rem; letter-spacing:.28em; gap:.6rem; }
  .lb__item figcaption span::after{ width:.9rem; margin-left:.6rem; }

  .cards{ grid-template-columns:1fr; max-width:280px; margin-inline:auto; }
  .card{ aspect-ratio:4/3; }
  .card--photo{ aspect-ratio:auto; }

  .nav__wordmark{ font-size:1.1rem; letter-spacing:.18em; text-indent:.18em; }

  .hero{ padding:6.5rem var(--gutter) 4.5rem; }
  .hero__logo{ width:min(430px, 72vw); }
  .hero__tagline{ font-size:clamp(1.5rem, 7vw, 2rem); }

  .section--social .section__title{ letter-spacing:.03em; }
  .charas{ grid-template-columns:1fr; gap:3.5rem; }
  .social-links{ flex-direction:column; align-items:center; }
  .social-links .btn{ min-width:15rem; }
  .marquee{ padding:1.15rem 0; }
  .marquee__track{ --mq-gap:1.8rem; }
  .marquee__track span{ font-size:.68rem; letter-spacing:.3em; }

  .footer__links{ gap:1.2rem 1.4rem; }
  .btn{ padding:1.05em 2.2em; letter-spacing:.24em; }
}

/* very small phone */
@media (max-width:360px){
  .hero__logo{ width:82vw; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
  .anim{ opacity:1; translate:0 0; }
  .lb__frame .lb__px{ inset:0; height:100%; transform:none; }
  .chara__fig img, .chara__talk.is-hop{ animation:none !important; }
  .intro{ display:none; }
  /* static: show one phrase pair instead of wrapping the whole loop into a block */
  .marquee__track{ animation:none; width:auto; flex-direction:column; gap:.6rem; padding-inline:var(--gutter); text-align:center; }
  .marquee__track > *{ margin-right:0; }
  .marquee__track > :nth-child(2), .marquee__track > :nth-child(n+4){ display:none; }
  .hero__logo,.hero__stardust{ transform:none !important; }
  .hero::before{ animation:none; transform:scale(1.06); }
  .hero__logo,.hero__tagline,.hero__sub,.hero .btn,.hero__scroll{
    animation:none !important; opacity:1; translate:0 0;
  }
}