/* Sunshine Coffee — showcase effects (see src/scripts/fx.ts). Same palette and fonts as the
   rest of the site; this file only adds motion on top. */

/* ---------- Intro curtain ---------- */
.intro{display:none}
html.has-intro .intro{display:grid;position:fixed;inset:0;z-index:100;place-items:center;background:var(--surface-ink);color:var(--cream-100);
  animation:intro-lift .7s cubic-bezier(.77,0,.175,1) .7s forwards;border-radius:0 0 0 0}
html.intro-hold{overflow:hidden}
html.intro-hold .page *{animation-play-state:paused!important}
.intro-inner{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.intro-logo{width:min(220px,50vw);height:auto;box-sizing:content-box;padding:22px 28px;background:var(--cream-100);border-radius:32px;rotate:-3deg;box-shadow:0 18px 40px -20px rgba(0,0,0,.6);animation:intro-pop .6s var(--ease-stretch) .05s backwards}
.intro-words{margin:0;display:flex;gap:.6em;font-family:var(--font-display);font-size:clamp(1.4rem,4vw,2.2rem);overflow:hidden}
.intro-words span{display:inline-block;animation:intro-word .5s var(--ease-out) calc(.2s + var(--i) * 50ms) backwards}
.intro-words span:nth-child(even){color:var(--miel-500)}
@keyframes intro-pop{from{opacity:0;scale:.85;rotate:-8deg}}
@keyframes intro-word{from{translate:0 110%}}
@keyframes intro-lift{to{clip-path:inset(0 0 100% 0 round 0 0 50% 50%)}}
html.has-intro .intro{clip-path:inset(0 0 0 0 round 0 0 0 0)}

/* ---------- Page transitions: the new page rises like a curtain over the old one ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes vt-sink{to{scale:.94;translate:0 -2%;filter:brightness(.55)}}
  @keyframes vt-rise{from{clip-path:inset(100% 0 0 0 round 56px 56px 0 0)}to{clip-path:inset(0 0 0 0 round 0)}}
  ::view-transition-old(root){animation:vt-sink .45s cubic-bezier(.32,.72,0,1) both;transform-origin:50% 0}
  ::view-transition-new(root){animation:vt-rise .5s cubic-bezier(.32,.72,0,1) both}
  ::view-transition-group(site-nav){animation-duration:.5s;animation-timing-function:cubic-bezier(.32,.72,0,1)}
}
html{background:var(--surface-ink)}

/* ---------- Custom cursor (mouse only) ---------- */
html.has-cursor,html.has-cursor *{cursor:none}
html.has-cursor :is(input,textarea,select,iframe){cursor:auto}
.fx-cursor{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out);color:var(--brown-700)}
.fx-cursor.is-visible{opacity:1}
.fx-cursor.is-hidden{opacity:0}
.fx-cursor.on-ink{color:var(--cream-100)}
.fx-cursor-dot,.fx-cursor-ring{position:absolute;left:0;top:0;border-radius:50%}
.fx-cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:currentColor;transition:scale .25s var(--ease-out),opacity .2s}
.fx-cursor-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border:1.5px solid currentColor;display:grid;place-items:center;
  transition:scale .45s var(--ease-stretch),background-color .3s var(--ease-out),border-color .3s var(--ease-out),opacity .3s}
.fx-cursor-label{font-family:var(--font-display);font-size:16px;color:var(--brown-800);opacity:0;scale:.6;transition:opacity .25s,scale .35s var(--ease-stretch);white-space:nowrap}
.fx-cursor.is-link .fx-cursor-ring{scale:1.6;background:color-mix(in oklab,currentColor 12%,transparent)}
.fx-cursor.is-link .fx-cursor-dot{scale:0}
.fx-cursor.is-label .fx-cursor-ring{scale:2.2;background:var(--miel-500);border-color:var(--miel-500)}
.fx-cursor.is-label .fx-cursor-label{opacity:1;scale:calc(1 / 2.2)}
.fx-cursor.is-label .fx-cursor-dot{scale:0}
.fx-cursor.is-down .fx-cursor-ring{scale:.8}
.fx-cursor.is-link.is-down .fx-cursor-ring{scale:1.3}

/* ---------- Footer "pause" button: stops everything that loops on its own ---------- */
.footer-pause{min-height:24px;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.footer-pause[aria-pressed="true"]{color:var(--text-inverse)}
html.motion-paused :is(.marquee-track,.tape-track,.sc-anim,.stamp svg,.hero-croissant){animation-play-state:paused!important}

/* ---------- Magnetic buttons ---------- */
html.has-cursor :is(.btn,.ibtn,.burger){transition:var(--transition-control),translate .45s var(--ease-stretch)}

/* ---------- Scroll velocity: the band leans into the scroll ---------- */
/* fx.ts sets the skew on .marquee-run itself (not a variable on .band, which would restyle the whole band). */
.band .marquee-run{transition:transform .2s linear}

/* ---------- Scroll-scrubbed text ---------- */
[data-scrub].is-split .sw{opacity:.25;transition:opacity .15s linear}
@media (prefers-reduced-motion:reduce){[data-scrub].is-split .sw{opacity:1!important}}

/* ---------- Text reveals ----------
   Headings: each word rises out of its own mask with a slight lean. Paragraphs come into focus,
   eyebrows wipe in from the left. Overrides the plainer reveals in motion.css. */
.w{display:inline-block;overflow:clip;overflow-clip-margin:.12em;padding:.1em .04em .16em;margin:-.1em -.04em -.16em;vertical-align:top}
.w .wi{display:inline-block}
.w.pill-word{overflow:visible}
@keyframes rv-mask{from{translate:0 108%;rotate:5deg}}
@keyframes rv-pill{0%{opacity:0;scale:.75;rotate:-18deg}60%{opacity:1}}
@keyframes rv-focus{from{opacity:0;translate:0 12px;filter:blur(4px)}}
@keyframes rv-wipe{from{clip-path:inset(0 100% 0 0);translate:-12px 0}}
@media (prefers-reduced-motion:no-preference){
  @media (scripting:enabled){
    [data-reveal="split"]:not(.is-in) .w{opacity:1}
    [data-reveal="split"]:not(.is-in) .wi{translate:0 108%}
    [data-reveal="split"]:not(.is-in) .pill-word{opacity:0}
    [data-reveal="split"].is-in .w{animation:none}
    [data-reveal="split"].is-in .wi{animation:rv-mask .85s cubic-bezier(.16,1,.3,1) calc(var(--d,0) * 90ms + var(--i) * 45ms) backwards;transform-origin:0 100%}
    [data-reveal="split"].is-in .pill-word{animation:rv-pill .9s var(--ease-stretch) calc(var(--d,0) * 90ms + var(--i) * 45ms + 120ms) backwards}
    [data-reveal="split"].is-in .pill-word .wi{animation:none}
    :is(p,.lead)[data-reveal].is-in{animation-name:rv-focus;animation-duration:.7s}
    .eyebrow[data-reveal].is-in{animation:rv-wipe .7s cubic-bezier(.16,1,.3,1) calc(var(--d,0) * 90ms) backwards}
  }
  /* Page heads that aren't scroll-revealed get the same treatment */
  .enter>p{animation-name:rv-focus}
  .enter>.eyebrow,.enter>.row-wrap>.eyebrow{animation:rv-wipe .7s cubic-bezier(.16,1,.3,1) calc((var(--e,0) + var(--n,0)) * 90ms + 80ms) backwards}
}