/* ===========================================================================
   yunai.music — mobile
   The music video is the background. Everything on top of it is glass.
   No prefers-color-scheme anywhere; the page does not follow the OS.
   =========================================================================== */

:root{
  --paper:     #f6efe6;
  --muted:     rgba(246,239,230,.62);
  /* pulled from her logo: pale blue + teal */
  --pale:      197,223,233;
  --teal:      64,132,145;
  --fallback:  #171210;   /* only visible for the instant before the loop paints */

  --glass:     rgba(255,255,255,.026);
  --glass-2:   rgba(255,255,255,.008);
  --edge:      rgba(255,255,255,.13);
  --lip:       rgba(255,255,255,.28);

  --step:  clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  --gap:   clamp(1rem, 3.6vw, 1.5rem);
  --round: 999px;
  --card:  18px;
  --ease:  cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100% }

body{
  min-height:100svh;
  background:var(--fallback);
  color:var(--paper);
  font:var(--step)/1.55 ui-sans-serif, -apple-system, "Segoe UI", Inter, system-ui, sans-serif;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto }
button,input{ font:inherit; color:inherit }

/* ── background ─────────────────────────────────────────────────────────────
   Fixed so the loop holds still while the page scrolls over it.
   ------------------------------------------------------------------------- */

.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }

.bg__video{
  width:100%; height:100%;
  object-fit:cover;
  object-position:var(--bg-pos, 50% 40%);
}

/* Legibility only — not a background in its own right. Darkest at the top and
   bottom where the wordmark and footer sit, lightest through the middle so the
   footage still reads as footage. */
.bg__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(12,9,7,calc(var(--dim,.52) + .22)) 0%,
      rgba(12,9,7,calc(var(--dim,.52) - .14)) 34%,
      rgba(12,9,7,calc(var(--dim,.52) - .08)) 62%,
      rgba(12,9,7,calc(var(--dim,.52) + .3)) 100%);
}

.bg__grain{
  position:absolute; inset:0; opacity:.2; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ── shell ──────────────────────────────────────────────────────────────── */

.shell{
  position:relative; z-index:1;
  width:min(100% - 2.2rem, 27rem);
  margin-inline:auto;
  min-height:100svh;
  padding-block:clamp(3rem,12vh,5rem) 2.5rem;
  display:flex; flex-direction:column; gap:var(--gap);
  justify-content:center;
}

/* ── masthead ───────────────────────────────────────────────────────────── */

.masthead{ text-align:center; margin-bottom:.4rem }

/* Her wordmark, lifted from yunai.music — 13 outlined paths, already white. */
.wordmark{ line-height:0 }

.wordmark__img{
  width:min(72%, 250px);
  height:auto;
  margin-inline:auto;
  filter:drop-shadow(0 2px 24px rgba(0,0,0,.6));
}

.handle{
  margin-top:.7rem;
  font-size:.74rem; letter-spacing:.2em;
  color:var(--muted);
}

/* ── pills ──────────────────────────────────────────────────────────────────
   Transparent. The footage shows through — the blur is what makes it readable,
   not a fill colour.
   ------------------------------------------------------------------------- */

.pills{ display:flex; flex-direction:column; gap:.55rem }

.pill{
  position:relative;
  display:flex; align-items:center; gap:.85rem;
  padding:.8rem 1.3rem;
  border-radius:var(--round);
  text-decoration:none; color:var(--paper);
  background:linear-gradient(160deg, var(--glass), var(--glass-2));
  border:1px solid var(--edge);
  box-shadow:
    inset 0 1px 0 var(--lip),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 8px 22px -14px rgba(0,0,0,.7);
  backdrop-filter:blur(22px) saturate(1.6);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  overflow:hidden;
  transition:
    transform .3s var(--ease),
    border-color .3s var(--ease),
    background .35s var(--ease),
    box-shadow .35s var(--ease);
}

/* a bead of light running the length of the pill on press */
.pill::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 30%, rgba(255,248,238,.13) 48%, transparent 66%);
  translate:-110% 0;
  transition:translate .8s var(--ease);
}
/* Hover and press both land here. Glass gets less transparent, the edge picks
   up the pale blue out of her logo, and the bead runs the length of the pill. */
.pill:hover,.pill:focus-visible{
  background:linear-gradient(160deg, rgba(var(--pale),.13), rgba(var(--teal),.06));
  border-color:rgba(var(--pale),.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.42),
    0 0 0 1px rgba(var(--pale),.12),
    0 10px 30px -14px rgba(var(--teal),.6);
  transform:translateY(-1px);
}
.pill:hover::before,.pill:focus-visible::before{ translate:110% 0 }
.pill:hover .pill__arrow{ opacity:1; translate:4px 0; color:rgb(var(--pale)) }
.pill:hover .pill__ja{ color:rgb(var(--pale)); opacity:1 }
.pill:hover .pill__en{ color:rgba(var(--pale),.8) }
.pill:active{ transform:scale(.985) }

.pill__label{ flex:1; letter-spacing:.04em }

/* Japanese above English. JP needs a system stack that actually has the glyphs;
   without it Safari falls back to something with the wrong weight and spacing. */
.pill__cta{ display:flex; flex-direction:column; align-items:flex-end; gap:.05rem; text-align:right }

.pill__ja{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",
              "Noto Sans JP",ui-sans-serif,sans-serif;
  font-size:.72rem; letter-spacing:.02em; line-height:1.35;
  color:var(--paper); opacity:.9;
  transition:color .3s var(--ease), opacity .3s var(--ease);
}

.pill__en{
  font-size:.6rem; letter-spacing:.08em; color:var(--muted);
  transition:color .3s var(--ease);
}
.pill__arrow{ opacity:.45; transition:opacity .3s var(--ease), translate .3s var(--ease), color .3s var(--ease) }

.pill--todo{ opacity:.4; cursor:not-allowed; pointer-events:none; border-style:dashed }

/* Android in-app webviews can chug on backdrop-filter. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pill{ background:rgba(24,18,14,.6) }
}

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