/* ==========================================================================
   FINAL PASS
   Loaded last. Three jobs: give the hero depth without ornaments, push the
   background letters back to a texture, and grow the logo.
   ========================================================================== */

/* ==========================================================================
   1 · THE HERO MOVES THROUGH ITS OWN PARTS
   Every one of these carries --px and --py from the drive in site.js. The table
   sits behind and lags, Kelly leads, the bubble leads most. That is the whole
   depth system: no balloons, no stars, no clouds.
   ========================================================================== */
.hero-table .cine{
  transform:translate3d(var(--px,0px),var(--py,0px),0) scale(var(--hs,1.05));
  transition:transform .9s cubic-bezier(.22,.61,.36,1);
  will-change:transform}

#feltWords,.standee,.standee .speech{
  transform:translate3d(var(--px,0px),var(--py,0px),0);
  transition:transform .6s cubic-bezier(.22,.61,.36,1)}
/* the standee keeps its own placement; the drive only nudges it */
.standee{will-change:transform}

/* Kelly breathes even when the pointer is still */
@keyframes kelly-breathe{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-7px) rotate(.5deg)}}
.in-motion .standee .kelly-inner{animation:kelly-breathe 6.5s ease-in-out -1s infinite}

/* the bubble bobs on its own clock so the two never lock together */
@keyframes bubble-bob{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(-1.4deg) translateY(-6px)}}
.in-motion .standee .speech{animation:bubble-bob 5.2s ease-in-out -2s infinite}

/* the felt words settle and then breathe, each on its own offset */
@keyframes felt-breathe{
  0%,100%{transform:translateY(0) rotate(var(--fr,0deg))}
  50%{transform:translateY(-5px) rotate(calc(var(--fr,0deg) + .8deg))}}
.in-motion #feltWords .felt{animation:felt-breathe var(--fd,5s) ease-in-out var(--fdl,0s) infinite}

/* hover reactions on the real hero controls */
.hero-table .btn{transition:transform .3s cubic-bezier(.34,1.56,.64,1),
  box-shadow .3s ease, background-color .25s ease, color .25s ease}
.hero-table .btn-primary:hover{transform:translateY(-4px) rotate(-1deg)}
.hero-table .btn-secondary:hover{transform:translateY(-4px) rotate(1deg)}
.standee:hover .kelly-inner{filter:drop-shadow(0 22px 26px rgba(51,40,74,.26))}

/* ==========================================================================
   2 · THE BACKGROUND LETTERS COME BACK, QUIETLY
   They were removed entirely; asked for again, but as texture. Grey, low
   contrast, behind everything, and never in the hero.
   ========================================================================== */
.u-letter{
  background:none !important;
  color:rgba(51,40,74,.10) !important;
  box-shadow:none !important;
  border-radius:0 !important;
  font-family:var(--display);
  font-weight:600;
  filter:none !important}
.u-letter{width:auto !important;height:auto !important}

/* the colourful shapes stay ahead of them */
.u-rainbow,.u-cloud,.u-star,.u-spark,.u-balloon{position:relative;z-index:2}
.u-letter{z-index:1}

/* ==========================================================================
   3 · THE LOGO
   ========================================================================== */
:root{--nav-h:104px}
.brand img{width:88px;height:88px;border-width:4px}
.brand b{font-size:1.34rem}
@media (max-width:1100px){
  :root{--nav-h:92px}
  .brand img{width:72px;height:72px}
}
@media (max-width:560px){
  :root{--nav-h:84px}
  .brand img{width:64px;height:64px;border-width:3px}
}

/* ==========================================================================
   4 · REDUCED MOTION
   The composition holds still. It never disappears.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .hero-table .cine,#feltWords,.standee,.standee .speech{
    transform:none !important;transition:none !important}
  .in-motion .standee .kelly-inner,
  .in-motion .standee .speech,
  .in-motion #feltWords .felt{animation:none !important}
  .standee .speech{transform:rotate(-3deg) !important}
}

/* ==========================================================================
   5 · THE DECORATION STARTS BELOW THE HERO
   The universe layer is fixed and full screen, so its rainbows, clouds, stars
   and letters sat behind the hero even though the table image hid them. Hidden
   is not the same as absent: the moment that image fails to cover, they appear.
   So the layer is simply switched off while the hero owns the screen, and fades
   in as the visitor scrolls into the sections it belongs to.
   ========================================================================== */
.universe{opacity:0;transition:opacity .7s cubic-bezier(.22,.61,.36,1)}
body.past-hero .universe{opacity:1}

/* Invisible was still expensive: some 140 twinkling, floating, filtered shapes
   kept animating behind the intro and the hero film, and on a phone that cost
   the film its frames. Off screen now means off: not painted and not running.
   Visibility waits for the fade-out before it switches, so leaving looks the
   same as before. */
body:not(.past-hero) .universe{visibility:hidden;
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), visibility 0s linear .7s}
body:not(.past-hero) .universe *{animation-play-state:paused !important}

@media (prefers-reduced-motion: reduce){
  .universe{transition:none}
}

/* ==========================================================================
   6 · KELLY GETS HER OWN LANE
   Measured overlaps at 1440, 1280 and 900: the speech bubble cut through the
   lede and the buttons ran into Kelly. Tuning percentages only moves the
   problem to another width, so the hero now reserves a lane on each side that
   the copy column is not allowed to enter. Overlap becomes impossible rather
   than unlikely.
   ========================================================================== */
.hero-table{--lane:clamp(200px,22vw,300px)}

.hero-in{
  max-width:min(40rem, calc(100vw - 2 * var(--lane) - 80px));
  margin-inline:auto}

.standee{
  right:max(1.5rem, calc(var(--lane) * .12));
  width:clamp(190px,19vw,262px);
  bottom:0}

/* the bubble lives in Kelly's lane, above her, and is capped so it cannot grow
   back across the reading column */
.standee .speech{
  right:0;left:auto;bottom:auto;top:-1.5rem;
  width:max-content;max-width:calc(var(--lane) + 3.5rem);
  transform:rotate(-3deg)}
.standee .speech::after{left:auto;right:22%}

@media (max-width:1100px){
  .hero-table{--lane:clamp(150px,20vw,210px)}
  .standee{width:clamp(150px,19vw,200px)}
}

/* stacked: the lane idea is not needed, nothing sits beside anything */
@media (max-width:900px){
  .hero-in{max-width:min(38rem,88vw)}
  .standee{position:relative;right:auto;left:auto;margin:1.6rem auto 0;
    width:min(220px,58vw)}
  .standee .speech{position:static;margin:0 auto .9rem;transform:rotate(-2deg);
    max-width:none;text-align:center}
  .standee .speech::after{display:none}
}

/* ==========================================================================
   7 · THE NAVIGATION MAKES ROOM FOR THE BIGGER LOGO
   ========================================================================== */
.nav-in{gap:.7rem}
.brand{gap:.55rem}
.brand b{font-size:1.18rem;white-space:nowrap}
.nav-links{gap:0}
.nav-links a{padding:.5rem .52rem;font-size:.92rem}
@media (max-width:1240px){ .brand b{display:none} }

/* ==========================================================================
   8 · TYPOGRAPHY WITH MORE CHARACTER
   The headings were correct but plain. They now sit tighter, heavier and a
   little larger, with the highlighted word carrying a colour and a hand drawn
   underline. Body text is untouched: it is there to be read, not performed.
   ========================================================================== */
.h1,.h2{letter-spacing:-.028em;font-weight:600}
.h1{font-size:clamp(2.5rem,5.9vw,4.3rem);line-height:1.02}
.h2{font-size:clamp(2rem,4vw,3.2rem);line-height:1.08}
.h3{font-size:clamp(1.3rem,2.2vw,1.78rem);letter-spacing:-.018em}

/* section headings get a small kicker mark rather than another icon */
.sec-head.center .h2{position:relative;display:inline-block}

/* the highlighted word: colour plus the squiggle already in the system */
.squiggle::after{height:.34em;opacity:.42}

/* buttons: friendlier and bolder */
.btn{font-size:1.04rem;letter-spacing:-.005em;padding:1rem 2rem}
.btn-primary{box-shadow:0 6px 0 rgba(0,0,0,.14)}
.hero-table .btn{font-size:1.08rem;padding:1.05rem 2.1rem}

/* the eyebrow reads as a sticker, not a label */
.eyebrow{font-size:.82rem;letter-spacing:.16em;padding:.5rem 1.15rem;
  transform:rotate(-1.2deg)}

/* the lede gets a touch more air under a big headline */
.hero-in .lede{font-size:clamp(1.06rem,1.15vw,1.2rem);margin-top:1.3rem}

/* ==========================================================================
   9 · A LITTLE MORE COLOUR WHERE IT WAS STILL PALE
   ========================================================================== */
/* the about section had no ground of its own */
#about{background:linear-gradient(180deg,rgba(255,249,241,0) 0%,#FFF1D2 20%,#FFE5D2 80%,rgba(255,249,241,0) 100%)}

/* the contact section closes the page on colour rather than on cream */
#contact{background:linear-gradient(180deg,rgba(255,249,241,0) 0%,var(--turquoise-soft) 24%,var(--sky-soft) 100%)}

/* the collaborations card gets a sticker corner so it reads as made, not boxed */
.collab-side{position:relative}
.collab-side .h3{font-size:1.5rem}

/* the freebies cards lift their headings */
.free h3{font-size:1.2rem;letter-spacing:-.015em}
.free-ico{width:70px;height:70px}

/* ==========================================================================
   10 · THE OWNER'S CALL ON REDUCED MOTION
   The owner asked for the sequence and the hero to run for everyone, the same
   decision they made on the earlier build. So the two things that carry the
   brand keep moving: the intro writes, and the hero's own parts drift.
   The setting still governs everything decorative, which is where it does the
   real work: the page universe holds still, loops stop, entrances are instant.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .hero-table .cine{
    transform:translate3d(var(--px,0px),var(--py,0px),0) scale(var(--hs,1.05)) !important;
    transition:transform .9s cubic-bezier(.22,.61,.36,1) !important}
  #feltWords,.standee,.standee .speech{
    transform:translate3d(var(--px,0px),var(--py,0px),0) !important;
    transition:transform .6s cubic-bezier(.22,.61,.36,1) !important}
  .standee .speech{transform:translate3d(var(--px,0px),var(--py,0px),0) rotate(-3deg) !important}

  .in-motion .standee .kelly-inner{
    animation:kelly-breathe 6.5s ease-in-out -1s infinite !important}
  .in-motion .standee .speech{
    animation:bubble-bob 5.2s ease-in-out -2s infinite !important}

  /* the intro performs instead of skipping to its last frame */
  .intro{transition:transform 1.05s cubic-bezier(.7,0,.28,1), opacity .75s ease .3s !important}
  .intro.gone{transform:translateY(-102%) !important;opacity:0}
  .intro.playing .intro-mascot{
    animation:intro-pop .9s 6.7s cubic-bezier(.2,1.6,.5,1) forwards !important}
}