/* flyin' - design system: sticker/riso poster, cream + ink + red, no gradients */

:root{
  --bg:#ffefdb;
  --ink:#3b2226;
  --shell:#2a1519;
  --accent:#e8474b;
  --pink:#f7a8ab;
  --yellow:#ffd166;
  --green:#7fc97f;
  --border:3px;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-hover: 6px 6px 0 var(--ink);
  --shadow-active: 1px 1px 0 var(--ink);
  --radius: 999px;
  --card-radius: 22px;
  --frame-radius: 28px;
  --frame-margin: 14px;
  --display: "Bagel Fat One", "M PLUS Rounded 1c", sans-serif;
  --body: "M PLUS Rounded 1c", sans-serif;
  --gutter: clamp(1rem,4vw,3rem);
}

*{ box-sizing:border-box; }
/* the [hidden] attribute must always win over component display rules (.gate-buttons,
   .gate-loading, .lore-overlay etc. all set their own `display`, which otherwise ties
   with [hidden] on specificity and can silently show "hidden" elements) */
[hidden]{ display:none !important; }
html,body{ margin:0; padding:0; height:100%; }
body{
  background:var(--shell);
  color:var(--ink);
  font-family:var(--body);
  font-weight:700;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
strong, b, em, .stamp-pill, .gate-status{ font-weight:800; }
a{ color:inherit; text-decoration:none; }
img,video{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.accent{ color:var(--accent); }

/* ---------- poster frame: the whole site lives inside this rounded card ---------- */
.frame{
  position:fixed;
  top:var(--frame-margin); left:var(--frame-margin);
  right:var(--frame-margin); bottom:var(--frame-margin);
  border-radius:var(--frame-radius);
  overflow:hidden;
  background:var(--bg);
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  /* iOS safari: overflow+radius does not clip composited (transformed/animated)
     children without forcing a mask + its own compositing layer */
  isolation:isolate;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);
  transform:translateZ(0);
}

/* grain overlay - scoped to the frame so the rounded corners stay clean */
.grain{
  position:absolute; inset:0; z-index:9000; pointer-events:none;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* custom cursor (pointer:fine only, added via JS) - lives above the frame */
.cursor-dot{
  position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%;
  background:var(--ink); z-index:9999; pointer-events:none;
  transform:translate(-50%,-50%); opacity:0;
  transition:opacity .2s ease, background .2s ease, width .2s ease, height .2s ease;
}
.cursor-dot.is-active{ opacity:1; }
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor .char-wrap{ cursor:none; }
.cursor-dot.is-hover{ width:34px; height:34px; background:var(--accent); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.4em;
  padding:.85em 1.6em;
  border:var(--border) solid var(--ink);
  border-radius:var(--radius);
  font-family:var(--display);
  font-size:.95rem;
  box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:var(--shadow-hover); }
.btn:active{ transform:translate(3px,3px); box-shadow:var(--shadow-active); }
.btn-accent{ background:var(--accent); color:#fff; }
.btn-ink{ background:var(--bg); color:var(--ink); }
.btn-outline{ background:transparent; color:var(--ink); }

/* ---------- entry gate ---------- */
.gate{
  position:absolute; inset:0; z-index:8000;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  overflow:hidden;
}
.gate-clouds{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.gate-cloud{
  position:absolute;
  filter:drop-shadow(3px 4px 0 rgba(59,34,38,.1));
}
.gate-cloud.c1{ top:9%; left:4%; width:170px; opacity:.85; }
.gate-cloud.c2{ top:64%; left:7%; width:120px; opacity:.7; }
.gate-cloud.c3{ top:16%; right:5%; width:200px; opacity:.9; }
.gate-cloud.c4{ top:66%; right:8%; width:150px; opacity:.75; }
.gate-cloud.c5{ top:42%; left:39%; width:105px; opacity:.5; }
.gate-cloud.c6{ top:5%; right:35%; width:90px; opacity:.55; }
.gate-cloud.c7{ top:85%; left:22%; width:150px; opacity:.65; }
.gate-cloud.c8{ top:88%; right:20%; width:120px; opacity:.6; }
.gate-cloud.c9{ top:30%; left:14%; width:80px; opacity:.5; }
.gate-cloud.c10{ top:33%; right:14%; width:95px; opacity:.55; }

.gate-inner{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:1.1rem; padding:1.5rem; }
.gate-jp{
  writing-mode:vertical-rl; font-size:.85rem; letter-spacing:.3em; color:var(--accent);
  opacity:.8; margin-bottom:-.3rem;
}
.gate-word{
  font-family:var(--display); font-size:clamp(2.8rem,10vw,5.5rem); color:var(--ink); line-height:1;
  letter-spacing:-0.01em;
  padding-bottom:.16em; margin-bottom:-.16em;
}
.gate-loading{ display:flex; flex-direction:column; align-items:center; gap:.9rem; }
.gate-bar-wrap{ width:min(80vw,360px); }
.gate-bar{
  border:var(--border) solid var(--ink); border-radius:var(--radius);
  height:22px; overflow:hidden; background:#fff;
}
.gate-bar-fill{
  height:100%; width:0%;
  background:repeating-linear-gradient(45deg, var(--accent) 0 10px, var(--pink) 10px 20px);
  transition:width .12s linear;
}
.gate-status{ font-size:.85rem; opacity:.75; min-height:1.2em; }
.gate-buttons{ display:flex; flex-direction:column; align-items:center; gap:.85rem; margin-top:.3rem; }
.gate-btn-primary{ font-size:1.15rem; padding:1.05em 2.5em; }
.gate-link{
  font-family:var(--body); font-size:.85rem; opacity:.7;
  text-decoration:underline; text-underline-offset:3px;
  padding:.3em .4em;
  transition:opacity .15s ease, color .15s ease;
}
.gate-link:hover{ opacity:1; color:var(--accent); }

/* ---------- japanese vertical decoration ---------- */
.jp-vert{
  writing-mode:vertical-rl; letter-spacing:.4em; font-size:.8rem; color:var(--ink);
  opacity:.35;
}
.jp-edge{
  position:absolute; right:2px; top:6%;
  height:200px; display:none; z-index:1;
}

/* ---------- header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem var(--gutter);
  position:relative; z-index:20;
}
.logo{ display:flex; flex-direction:column; line-height:1; }
.logo-jp{ font-size:.6rem; letter-spacing:.25em; color:var(--accent); margin-bottom:.15rem; }
.logo-word{ font-family:var(--display); font-size:1.3rem; }
.nav{ display:flex; align-items:center; gap:.7rem; font-size:.9rem; }

/* nav links + sound toggle restyled as riso sticker-chip buttons, matching .btn language */
.nav-chip{
  display:inline-flex; align-items:center; gap:.35em;
  padding:.5em 1.05em;
  border:2.5px solid var(--ink); border-radius:var(--radius);
  font-family:var(--display); font-size:.8rem;
  background:#fff; color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.nav-chip:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); background:var(--pink); }
.nav-chip:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.nav-chip.active{ background:var(--accent); color:#fff; }
.sound-toggle{ font-size:.8rem; }

/* ---------- hero / poster layout ---------- */
.page{ position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden; }
.page-home{ height:100%; }
.hero.poster{
  flex:1 1 auto; min-height:0; position:relative; z-index:10;
}
.poster-stage{ position:relative; height:100%; min-height:420px; }

/* text column - normal flow so headline height never collides with the bottom row */
.text-col{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column;
  padding:1.1rem var(--gutter) clamp(3.2rem,7vh,5.5rem);
}
.text-col-spacer{ flex:1 1 auto; min-height:.5rem; }

/* stamp pill */
.stamp-pill{
  align-self:flex-start; z-index:4;
  font-size:.8rem; letter-spacing:.04em; font-weight:700;
  background:#fff; color:var(--ink); border:2px solid var(--ink); border-radius:var(--radius);
  padding:.4em 1em; box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-3deg);
  margin-bottom:.9rem;
}

/* headline - back layer, giant type is the design */
.headline{
  z-index:1; margin:0; max-width:92vw;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.8rem, 12.6vw, 13.5rem);
  line-height:0.88; letter-spacing:-0.01em;
}
/* extra bottom padding keeps descenders (p, y) from being clipped by the line-mask's
   overflow:hidden; negative margin cancels the padding out of layout so nothing shifts */
.headline .line{ display:block; overflow:hidden; padding-bottom:.22em; margin-bottom:-.22em; }
.headline .line-inner{ display:inline-block; }
.headline .word{ display:inline-block; will-change:transform; }

/* bottom row: sub-line + CTAs, left-aligned above the ticker */
.bottom-row{
  display:flex; flex-direction:column; gap:1rem; max-width:min(46ch,90vw);
}

/* threaded front word - duplicate of the headline's "coins", layered through the
   character (behind: part of .headline; in front: this copy) for the depth sandwich.
   position is pinned every frame by alignThreadedWord() in JS and it never receives
   its own parallax tween, so it always sits pixel-locked on top of the real word. */
.threaded-word{
  position:absolute; z-index:3; top:32%; left:64%;
  font-family:var(--display); font-weight:400;
  font-size:clamp(2.2rem, 8.6vw, 6.8rem);
  color:var(--accent); -webkit-text-stroke:2px var(--ink); paint-order:stroke fill;
  transform:rotate(-3deg);
  filter:drop-shadow(3px 4px 0 var(--ink));
  pointer-events:none; user-select:none;
}

/* character - pulled left so she overlaps the tail of the headline;
   the threaded-word clone (JS-positioned) is what makes "coins" read as in front of her.
   all poses (main/panic/hype/shrug) render at this same fixed height, anchored
   bottom-center, so feet stay planted regardless of each pose's aspect ratio. */
.char-wrap{
  position:absolute; z-index:2; bottom:0; right:3%;
  height:84vh; max-height:96%; width:auto; transform-origin:bottom center;
}
.char-img{
  height:100%; width:auto; display:block;
  filter:drop-shadow(8px 12px 0 rgba(59,34,38,.16));
}
.poke-hint{
  position:absolute; left:-1rem; top:6%;
  font-family:var(--display); font-size:.72rem; color:var(--ink);
  background:#fff; border:2px solid var(--ink); border-radius:var(--radius);
  padding:.3em .7em; box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-6deg);
  white-space:nowrap;
}
.bubble{
  position:absolute; top:-6%; left:-4%;
  max-width:220px; background:#fff; color:var(--ink);
  border:var(--border) solid var(--ink); border-radius:20px;
  padding:.7em 1em; font-size:.9rem; font-family:var(--display);
  box-shadow:var(--shadow);
  z-index:30;
}
.bubble::after{
  content:""; position:absolute; bottom:-14px; left:30px;
  border-width:14px 10px 0 10px; border-style:solid;
  border-color:var(--ink) transparent transparent transparent;
}
.bubble::before{
  content:""; position:absolute; bottom:-10px; left:32px;
  border-width:11px 8px 0 8px; border-style:solid;
  border-color:#fff transparent transparent transparent;
  z-index:1;
}

/* sub-line + cta */
.sub-line{
  margin:0; font-size:clamp(.9rem,1.2vw,1.05rem); opacity:.85;
}
.cta-row{
  display:flex; gap:1rem; flex-wrap:nowrap;
}

/* ---------- ticker ---------- */
.ticker{
  background:var(--ink); color:var(--bg);
  border-top:var(--border) solid var(--ink);
  overflow:hidden; white-space:nowrap; position:relative; z-index:10;
  flex-shrink:0;
}
.ticker-track{
  display:inline-flex; font-family:var(--display); font-size:1.05rem;
  padding:.85em 0; animation:marquee 26s linear infinite;
}
.ticker-track span{ padding-right:1rem; }
.ticker .star{ color:var(--accent); padding:0 .3em; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ---------- lore overlay (in-page panel, not a separate document) ---------- */
.lore-overlay{
  position:absolute; inset:0; z-index:7000;
  background:var(--bg);
  visibility:visible;
}
.lore-overlay[hidden]{ display:none; }
.lore-panel{ position:relative; height:100%; display:flex; flex-direction:column; }
.lore-close{
  position:absolute; top:1rem; right:1.2rem; z-index:20;
  width:44px; height:44px; border-radius:50%;
  border:2.5px solid var(--ink); background:#fff; color:var(--ink);
  font-family:var(--display); font-size:1.5rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lore-close:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); background:var(--pink); }
.lore-close:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--ink); }
.lore-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* .reveal starts visible in CSS - GSAP applies the hidden->visible tween itself when the
   overlay opens, so content still shows with no-JS / reduced-motion / screenshots */
.lore-hero{
  position:relative; padding:5rem var(--gutter) 3rem; text-align:left;
  overflow:hidden;
}
.lore-hero-art{
  position:relative; border:var(--border) solid var(--ink); border-radius:var(--card-radius);
  overflow:hidden; box-shadow:var(--shadow); margin-top:2rem;
}
.lore-hero-art img, .lore-hero-art video{ width:100%; height:auto; display:block; }
.lore-title{
  font-family:var(--display); font-size:clamp(3.2rem,12vw,7.5rem); line-height:.9; letter-spacing:-0.01em;
  padding-bottom:.14em; margin-bottom:-.06em;
}

.section{ padding:3.4rem var(--gutter); max-width:1100px; margin:0 auto; }
.section h2{
  font-family:var(--display); font-size:clamp(1.6rem,3.4vw,2.4rem); margin:0 0 1.2rem;
}
.section p{ font-size:1.05rem; line-height:1.7; max-width:70ch; }

.cycle-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; margin-top:1.8rem;
}
.cycle-card{
  background:#fff; border:var(--border) solid var(--ink); border-radius:var(--card-radius);
  padding:1.4rem 1.2rem; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:.6rem;
  transform:rotate(var(--tilt,0deg));
}
.cycle-card:nth-child(1){ --tilt:-2deg; }
.cycle-card:nth-child(2){ --tilt:1.5deg; }
.cycle-card:nth-child(3){ --tilt:-1deg; }
.cycle-card:nth-child(4){ --tilt:2deg; }
.cycle-step{ font-family:var(--display); font-size:.75rem; color:var(--accent); }
.cycle-card h3{ font-family:var(--display); font-size:1.2rem; margin:0; }
.cycle-card p{ font-size:.9rem; margin:0; opacity:.85; }
.cycle-doodle{ width:34px; }

.rules-list{ display:flex; flex-direction:column; gap:1rem; margin-top:1.6rem; }
.rule{
  display:flex; gap:1rem; align-items:flex-start;
  background:#fff; border:var(--border) solid var(--ink); border-radius:var(--card-radius);
  padding:1.1rem 1.3rem; box-shadow:var(--shadow);
}
.rule-num{
  font-family:var(--display); font-size:1.3rem; color:var(--accent); flex-shrink:0;
}
.rule p{ margin:0; font-size:1rem; }

.cta-block{
  text-align:center; padding:5rem var(--gutter);
  background:var(--pink); border-top:var(--border) solid var(--ink); border-bottom:var(--border) solid var(--ink);
  margin-top:2rem;
}
.cta-block h2{ font-family:var(--display); font-size:clamp(1.8rem,4vw,2.6rem); margin:0 0 .5rem; }
.cta-block p{ margin:0 0 1.6rem; font-size:1.05rem; }
.cta-block .cta-row{ position:static; justify-content:center; }

.site-footer{
  text-align:center; padding:2.2rem 1rem; font-size:.85rem; opacity:.65;
}

/* ---------- responsive ---------- */
@media (min-width:701px){
  .jp-edge{ display:block; }
}

/* wide desktop: keep the headline's "coins" reaching under the character even though
   she sits pinned near the right edge (right:3%) - widen the type further so the
   depth-sandwich thread effect survives at larger viewports */
@media (min-width:1600px){
  .headline{ font-size:clamp(2.8rem, 14.6vw, 19rem); }
  .char-wrap{ right:1%; }
  .bottom-row{ max-width:36ch; }
}

@media (max-width:900px){
  .cycle-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:700px){
  html,body{ overflow-x:hidden; }
  :root{ --frame-margin:9px; --frame-radius:20px; }

  .hero.poster{ display:flex; flex-direction:column; }
  .poster-stage{ min-height:0; flex:1; }

  .text-col{ padding:.9rem var(--gutter) 1.1rem; }
  .stamp-pill{ font-size:.66rem; padding:.35em .8em; margin-bottom:1rem; }

  .headline{
    max-width:100%;
    font-size:clamp(2.3rem, 13.5vw, 3.4rem);
  }

  .text-col-spacer{ flex:0 0 1rem; min-height:1rem; }

  .threaded-word{
    font-size:clamp(1.4rem, 7vw, 2.2rem);
    top:auto; bottom:30%; left:auto; right:4%;
  }

  .char-wrap{ height:50vh; right:0; bottom:0; }
  .poke-hint{ display:none; }

  .bottom-row{ max-width:100%; gap:.6rem; }
  .sub-line{ font-size:.78rem; max-width:58%; }
  /* stacked, narrow column on the left so the character never covers a button */
  .cta-row{ display:flex; flex-direction:column; align-items:flex-start; width:100%; gap:.6rem; }
  .cta-row .btn{ font-size:.78rem; padding:.7em 1.3em; justify-content:center; width:min(58%,220px); gap:.3em; }

  .nav{ gap:.5rem; font-size:.78rem; flex-wrap:wrap; justify-content:flex-end; }
  .nav-chip{ font-size:.7rem; padding:.42em .8em; }
  .site-header{ flex-wrap:wrap; gap:.5rem; }
  .cycle-grid{ grid-template-columns:1fr; }
  .lore-hero{ padding-top:4.5rem; }

  .gate-cloud.c5, .gate-cloud.c6, .gate-cloud.c9, .gate-cloud.c10{ display:none; }
  .gate-cloud.c7{ width:100px; top:78%; }
  .gate-cloud.c8{ width:85px; top:80%; }
  .gate-btn-primary{ font-size:1rem; padding:.9em 1.9em; }
}

@media (prefers-reduced-motion:reduce){
  .ticker-track{ animation:none; }
}

/* sticker bits bursting from the character on click */
.burst-bit{
  position:absolute; z-index:6;
  font-family:var(--display); font-size:1.5rem; color:var(--accent);
  -webkit-text-stroke:1.5px var(--ink); paint-order:stroke fill;
  pointer-events:none; user-select:none; will-change:transform,opacity;
}