@font-face {
  font-family: "RX100";
  src: url("assets/fonts/RX100-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --belgian-chocolate: #21190d;
  --mud: #63461d;
  --mulberry-coulis: #740a38;
  --pickled-red-chilli: #dd3d23;
  --taro: #8686b8;
  --lemon-peel: #e5de52;
  --tahini: #e9dab1;
  --lino-100: #fdfcf7;
  --green-paint: #3d826b;
  --work-avatar-bg: #f0eada;
  --morph: 0.25s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: var(--lino-100);
  color: var(--belgian-chocolate);
  font-family: "RX100", "Courier New", monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis: none;
  overflow-x: hidden;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ── Journey: the pinned scroll stage ───────────────── */

html {
  /* each scene is a beat the scroll gently lands on, so quick scrolls
     don't skip past a scene */
  scroll-snap-type: y proximity;
}

.journey {
  /* 11 scene transitions x 120vh of scroll each, plus the pinned viewport */
  height: calc(12 * 120vh + 100vh);
  position: relative;
}

.snap-anchor {
  position: absolute;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-snap-align: start;
}

.journey__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  background: var(--lino-100);
  transition: background-color 0.7s ease;
}

/* in theater mode the room goes dark */
.journey__pin.theater-on {
  background: #21190d;
}

/* ── Cinema: the room + film, slid in as one piece ─────
   Enters from off-screen right on "Watch the movie", and slides back
   out to the right on EXIT — the home page underneath never moves,
   it's just progressively covered and uncovered. */

.cinema {
  position: absolute;
  inset: 0;
  z-index: 6;
  translate: 100% 0;
  transition: translate 0.7s cubic-bezier(0.65, 0, 0.35, 1);
}

.theater-on .cinema {
  translate: 0 0;
}

/* ── Theater: the dark room the film plays inside ───── */

.theater {
  position: absolute;
  inset: 0;
  /* solid dark room so it covers the home hero when the film is on */
  background: #21190d;
  pointer-events: none;
}

/* the screen — the story is scaled to sit exactly here (315,92,882,520
   of the 1512x896 design, expressed as % so it tracks any viewport) */
.theater__screen {
  position: absolute;
  left: 20.833%;
  top: 10.268%;
  width: 58.333%;
  height: 58.036%;
  background: var(--lino-100);
  transition: background-color 0.6s ease;
}

.theater__seats {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* EXIT buttons flanking the screen */
.exit {
  position: absolute;
  top: 63.8%;
  width: 93px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(221, 61, 35, 0.16);
  color: var(--pickled-red-chilli);
  font-size: 15px;
  line-height: 1;
  border: 1px solid rgba(221, 61, 35, 0.5);
  pointer-events: auto;
  transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.exit--left {
  left: 7.3%;
}
.exit--right {
  right: 7.3%;
}

.exit:hover {
  background: var(--pickled-red-chilli);
  color: var(--lino-100);
  transform: scale(1.06);
}

.exit:active {
  transform: scale(0.97);
}

/* ── Stage: every story scene, scaled into the screen ─ */

.stage {
  position: absolute;
  inset: 0;
  z-index: 7;
  transform-origin: 0 0;
  pointer-events: none;
  /* no transform transition: entering the theatre happens behind a dark
     screen, so the film is never seen scaling itself into place */
}

/* ── Projection: the room loads with a dark screen, then the film is
   projected onto it — a brief lamp flicker, then steady ── */

.projector-dark .theater__screen {
  background: #171009 !important;
  transition: none;
}

.projector-dark .stage {
  opacity: 0;
}

.project-on .stage {
  animation: project-in 0.85s ease-out both;
}

@keyframes project-in {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 0.55;
  }
  32% {
    opacity: 0.22;
  }
  50% {
    opacity: 0.85;
  }
  64% {
    opacity: 0.68;
  }
  100% {
    opacity: 1;
  }
}

.theater-on .stage {
  transform: translate(20.833%, 10.268%) scale(0.58333, 0.58036);
  pointer-events: auto;
}

.theater-on .journey__hint {
  color: var(--lino-100);
}

.scene {
  position: absolute;
  inset: 0;
  visibility: hidden;
  will-change: transform, opacity;
}

.scene--hero {
  visibility: visible;
}

.journey__hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  translate: -50% 0;
  font-size: 16px;
  line-height: 1.1;
  opacity: 0;
  color: var(--belgian-chocolate);
  animation: hint-in 0.8s ease-out 2.6s forwards, hint-bob 2.4s ease-in-out 3.4s infinite;
  transition: color 0.4s ease;
  pointer-events: none;
  z-index: 20;
}

.journey__hint--light {
  color: var(--lino-100);
}

@keyframes hint-in {
  to {
    opacity: 0.3;
  }
}

@keyframes hint-bob {
  0%,
  100% {
    translate: -50% 0;
  }
  50% {
    translate: -50% 6px;
  }
}

/* ── Entrance sequence ───────────────────────────────
   The middle text arrives first, line by line. Only once it has
   settled does the rest of the page load in around it — the garden
   grows (see .garden, gated on .is-alive from story.js at ~1.2s) and
   the header + ticker fade down. */

/* "Why hello there!" bounces in */
.hero__hello {
  animation: hello-bounce 0.6s cubic-bezier(0.34, 1.45, 0.64, 1) 0.25s backwards;
}

@keyframes hello-bounce {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  60% {
    opacity: 1;
    transform: scale(1.08);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* the headline and sub type themselves out letter by letter (story.js
   wraps each character in a .ch span) — each letter eases in on its
   own, so it still reads as typing but without the hard-edged
   cut-cut-cut of a single clip-path sweep across the whole line */

.hero__headline {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__line .ch,
.hero__sub .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: char-in 0.32s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  animation-delay: calc(var(--line-delay) + var(--i) * var(--char-gap));
}

.hero__line:nth-child(1) {
  --line-delay: 0.8s;
  --char-gap: 0.045s;
}
.hero__line:nth-child(2) {
  --line-delay: 1.7s;
  --char-gap: 0.045s;
}
.hero__sub {
  --line-delay: 2.55s;
  --char-gap: 0.032s;
}

@keyframes char-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* the CTA arrives last, together with the nav bar —
   after the garden has grown in. Scoped to the hero specifically: the
   Work page reuses .header too, and needs it there from the start. */
.journey .header,
.btn-watch {
  animation: page-fade 0.7s ease-out 4.9s backwards;
}

@keyframes page-fade {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Header ─────────────────────────────────────────── */

.header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1472px;
  margin: 20px auto 0;
  padding: 12px 20px;
  background: rgba(233, 218, 177, 0.22);
  border-radius: 100px;
}

.name {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--belgian-chocolate);
}

/* Logo: flower tile swaps to oat-milk tile with spinning star on hover */

.name__logo-wrap {
  position: relative;
  width: 32px;
  height: 32px;
}

.name__logo {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
}

.name__logo-hover {
  position: absolute;
  inset: 0;
  background: var(--tahini);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.name:hover .name__logo-hover {
  opacity: 1;
}

.name__logo-star {
  position: absolute;
  left: 0.28px;
  top: 0.28px;
  width: 31.44px;
  height: 31.44px;
}

.name:hover .name__logo-star {
  animation: star-spin 0.6s ease-in-out both;
}

@keyframes star-spin {
  from {
    rotate: -360deg;
  }
  to {
    rotate: 0deg;
  }
}

.name__logo-dot {
  position: absolute;
  left: 11.47px;
  top: 11.47px;
  width: 9.06px;
  height: 9.06px;
}

.name__text {
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Work button: pill → rectangle on hover */

.btn-work {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 10px 16px;
  background: var(--mulberry-coulis);
  color: var(--lemon-peel);
  border-radius: 100px;
  font-size: 16px;
  line-height: 1;
  transition: border-radius var(--morph);
}

.btn-work:hover {
  border-radius: 0;
}

/* My story button: plain, square-cornered */

.btn-story {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 10px 16px;
  background: var(--belgian-chocolate);
  border: 1px solid var(--belgian-chocolate);
  color: var(--lino-100);
  font-size: 16px;
  line-height: 1;
}

/* Curiosities button: scalloped circles → squares on hover */

.btn-curiosities {
  position: relative;
  display: flex;
  align-items: center;
}

.btn-curiosities__dot {
  width: 30px;
  height: 30px;
  margin-right: -9px;
  background: var(--pickled-red-chilli);
  border-radius: 100px;
  transition: border-radius var(--morph);
}

.btn-curiosities__dot:nth-child(4) {
  margin-right: 0;
}

.btn-curiosities:hover .btn-curiosities__dot {
  border-radius: 0;
}

.btn-curiosities__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: var(--lino-100);
}

/* ── Hero ───────────────────────────────────────────── */

.hero {
  /* the text block (through the CTA) centres in the band between the
     header and the top of the avatar's head: equal gap above and
     below. 88px tuned so gaps measure equal; 274px = girl height 259 + bottom 15. */
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 88px;
  padding-bottom: 274px;
  pointer-events: none;
}

.hero .btn-watch {
  pointer-events: auto;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 572px;
  max-width: 90vw;
  text-align: center;
}

.hero__sub {
  font-size: 22px;
  line-height: 30px;
  color: rgba(39, 27, 10, 0.5);
  margin-top: -4px;
}

.eyebrow {
  font-size: 20px;
  line-height: 1;
  font-feature-settings: "salt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1,
    "ss05" 1, "ss06" 1, "ss07" 1, "ss08" 1, "ss09" 1, "ss10" 1, "ss11" 1,
    "ss12" 1;
}

.hero__headline {
  font-size: 64px;
  font-weight: 400;
  line-height: 70px;
  letter-spacing: -1.5px;
}

/* Watch the movie — the way into the theater */
.btn-watch {
  margin-top: 28px;
  padding: 12px 16px;
  background: var(--belgian-chocolate);
  color: var(--lino-100);
  font-size: 20px;
  line-height: 1;
  transition: border-radius var(--morph), transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.btn-watch:hover {
  border-radius: 100px;
  transform: scale(1.04);
}

.btn-watch:active {
  transform: scale(0.98);
}

/* ── Garden illustrations ───────────────────────────── */

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

.garden > * {
  position: absolute;
  will-change: transform;
}

/* only the girl and the snail still rise from below — the plants grow
   in place, part by part. Like the plants, they stay hidden until the
   garden comes alive (after the middle text has arrived). */

.garden > img {
  transform-origin: 50% 100%;
}

.garden:not(.is-alive) > img {
  visibility: hidden;
}

.garden.is-alive > img {
  animation: plant-rise var(--dur, 1.1s) both;
  animation-delay: var(--d, 0s);
}

/* the girl gets her own rise — same anticipation and overshoot as the
   plants, but without the second follow-through bounce at the end
   (86% step below), which read as an extra hop on a human figure */
.garden.is-alive .garden__girl {
  animation-name: girl-rise;
}

/* Rise choreography: a slow peek out of the soil, a breath of
   anticipation, then the spring — stretched on the way up, a soft
   squash on landing, settling at rest. All scaling is anchored at
   the roots and stays under 4%. */

@keyframes plant-rise {
  0% {
    translate: 0 105%;
    scale: 1 1;
    animation-timing-function: cubic-bezier(0.35, 0, 0.4, 1);
  }
  16% {
    translate: 0 88%;
    scale: 1 1;
    animation-timing-function: ease-in-out;
  }
  24% {
    /* anticipation: it gathers itself before the push */
    translate: 0 91%;
    scale: 1.025 0.96;
    animation-timing-function: cubic-bezier(0.5, 0, 0.15, 1);
  }
  58% {
    /* fast rise: stretched by its own momentum, slight overshoot */
    translate: 0 -3%;
    scale: 0.975 1.04;
    animation-timing-function: ease-out;
  }
  72% {
    /* landing: weight settles into a soft squash */
    translate: 0 1.2%;
    scale: 1.02 0.975;
    animation-timing-function: ease-in-out;
  }
  86% {
    translate: 0 -0.5%;
    scale: 0.995 1.008;
    animation-timing-function: ease-in-out;
  }
  100% {
    translate: 0 0;
    scale: 1 1;
  }
}

@keyframes girl-rise {
  0% {
    translate: 0 105%;
    scale: 1 1;
    animation-timing-function: cubic-bezier(0.35, 0, 0.4, 1);
  }
  16% {
    translate: 0 88%;
    scale: 1 1;
    animation-timing-function: ease-in-out;
  }
  24% {
    translate: 0 91%;
    scale: 1.025 0.96;
    animation-timing-function: cubic-bezier(0.5, 0, 0.15, 1);
  }
  58% {
    translate: 0 -3%;
    scale: 0.975 1.04;
    animation-timing-function: ease-out;
  }
  72% {
    translate: 0 1.2%;
    scale: 1.02 0.975;
    animation-timing-function: ease-in-out;
  }
  100% {
    translate: 0 0;
    scale: 1 1;
  }
}

/* Follow-through: after the growth finishes, the whole plant keeps a
   soft decaying sway, pivoting at its root — the top settles last.
   Runs on the container so the grey base and the colour layer sway in
   lockstep; the colour→grey wash can then cross-fade at any angle
   without a jump. Once settled, a slow idle breeze takes over (period
   varies per plant via --sway so they never move in unison), and
   hovering a plant deepens its sway. */

.garden.is-alive .plant {
  transform-origin: 50% 97%;
  animation: plant-sway 1.2s ease-in-out both,
    plant-idle calc(5.5s + var(--sway, 1) * 0.9s) ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) + 1.05s), calc(var(--d, 0s) + 2.25s);
}

@keyframes plant-idle {
  0%,
  100% {
    rotate: 0deg;
  }
  30% {
    rotate: calc(var(--sway, 1) * var(--idle-amp, 0.4deg));
  }
  72% {
    rotate: calc(var(--sway, 1) * var(--idle-amp, 0.4deg) * -0.6);
  }
}

/* hover invites a bigger sway; events come from the plant's own
   shapes (the invisible colour layer doubles as the hit area, so the
   hover region matches the artwork, not its bounding box) */

.plant:hover {
  --idle-amp: 1.3deg;
}

.plant__color path,
.plant__color circle,
.plant__color rect {
  pointer-events: auto;
}

@keyframes plant-sway {
  0% {
    rotate: 0deg;
  }
  32% {
    rotate: calc(var(--sway, 1) * 1.4deg);
  }
  64% {
    rotate: calc(var(--sway, 1) * -0.6deg);
  }
  86% {
    rotate: calc(var(--sway, 1) * 0.2deg);
  }
  100% {
    rotate: 0deg;
  }
}

/* each plant carries a gray base and a colored layer on top;
   the color washes out once the page has settled */

.plant {
  display: block;
}

/* the grey base hides until the wash moment (it would otherwise show
   through while the colour plant is still growing) */

.plant__gray {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.garden.is-gray .plant__gray {
  opacity: 1;
}

.plant__color {
  position: absolute;
  inset: 0;
  transition: opacity 0.7s ease;
  transition-delay: calc(var(--i) * 40ms);
}

/* no fully-grown flash while the inline SVGs are being fetched */

.garden:not(.is-alive) .plant__color {
  visibility: hidden;
}

.plant__color svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.garden.is-gray .plant__color {
  opacity: 0;
}

.garden__snail {
  right: 99.7px;
  bottom: 241.7px;
  width: 22.3px;
  height: 34.3px;
}

/* the snail is too small to hide by rising from below, so she gets her
   own late entrance — a soft pop onto the tree trunk once it has grown */

.garden.is-alive img.garden__snail {
  transform-origin: 50% 90%;
  animation: bloom-pop 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) both;
  animation-delay: 1.6s;
}

.garden img.garden__snail {
  transition: filter 0.7s ease;
}

/* no grey variant exists for Snailina, so a filter matches her to the
   warm grey of the washed garden */

.garden.is-gray .garden__snail {
  filter: grayscale(1) brightness(1.9) sepia(0.12);
}

/* ── Growth choreography: each plant grows part by part ─
   Stems draw on first, leaves unfurl with offset and a soft
   overshoot (bigger leaves take longer), blooms open last.
   All delays hang off the plant's own --d, so parts overlap
   across neighbouring plants too. Gated on .is-alive, which
   the script adds once the SVGs are inlined. */

.plant__color path,
.plant__color circle,
.plant__color rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

/* before growth begins, every part waits unseen */

.garden.is-alive .plant__color path,
.garden.is-alive .plant__color circle,
.garden.is-alive .plant__color rect {
  animation-fill-mode: both;
}

@keyframes grow-up {
  0% {
    transform: scaleY(0);
  }
  78% {
    transform: scaleY(1.02);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes draw-in {
  0% {
    stroke-dashoffset: 1;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* same draw, opposite direction — for paths whose data starts at the
   tip: a negative offset reveals from the path's end (the trunk side),
   so branches grow out of the trunk the way trees actually do */

@keyframes draw-out {
  0% {
    stroke-dashoffset: -1;
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes leaf-in {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  70% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes bloom-pop {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  65% {
    transform: scale(1.16);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* trees: trunk climbs, canopy breathes in, branches draw, chillis pop */

.garden.is-alive [data-type="tree"] rect[id="Rectangle 16"] {
  animation: grow-up 0.6s cubic-bezier(0.3, 0, 0.2, 1) both;
  animation-delay: var(--d, 0s);
}

.garden.is-alive [data-type="tree"] path[id="Star 5"] {
  transform-origin: 50% 65%;
  animation: leaf-in 0.75s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  animation-delay: calc(var(--d, 0s) + 0.42s);
}

.garden.is-alive [data-type="tree"] path[stroke] {
  stroke-dasharray: 1;
  /* branch path data starts at the chilli tip, so draw-out reveals
     from the trunk outward */
  animation: draw-out 0.4s ease-out both;
}

.garden.is-alive [data-type="tree"]  path[id="Vector 19"] { animation-delay: calc(var(--d, 0s) + 0.58s); }
.garden.is-alive [data-type="tree"]  path[id="Vector 20"] { animation-delay: calc(var(--d, 0s) + 0.66s); }
.garden.is-alive [data-type="tree"]  path[id="Vector 21"] { animation-delay: calc(var(--d, 0s) + 0.74s); }
.garden.is-alive [data-type="tree"]  path[id="Vector 22"] { animation-delay: calc(var(--d, 0s) + 0.7s); }
.garden.is-alive [data-type="tree"]  path[id="Vector 23"] { animation-delay: calc(var(--d, 0s) + 0.8s); }
.garden.is-alive [data-type="tree"]  path[id="Vector 24"] { animation-delay: calc(var(--d, 0s) + 0.88s); }

.garden.is-alive [data-type="tree"] circle {
  transform-origin: 50% 50%;
  animation: bloom-pop 0.35s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.garden.is-alive [data-type="tree"] circle[id="Ellipse 23"] { animation-delay: calc(var(--d, 0s) + 0.95s); }
.garden.is-alive [data-type="tree"] circle[id="Ellipse 27"] { animation-delay: calc(var(--d, 0s) + 1.02s); }
.garden.is-alive [data-type="tree"] circle[id="Ellipse 24"] { animation-delay: calc(var(--d, 0s) + 1.09s); }
.garden.is-alive [data-type="tree"] circle[id="Ellipse 28"] { animation-delay: calc(var(--d, 0s) + 1.16s); }
.garden.is-alive [data-type="tree"] circle[id="Ellipse 25"] { animation-delay: calc(var(--d, 0s) + 1.22s); }
.garden.is-alive [data-type="tree"] circle[id="Ellipse 26"] { animation-delay: calc(var(--d, 0s) + 1.29s); }
.garden.is-alive [data-type="tree"] circle[id="Ellipse 29"] { animation-delay: calc(var(--d, 0s) + 1.35s); }

/* tamatar: main stem draws up, side stems follow, leaves unfurl
   from the stem outwards (the big lower pair slower), tomatoes last */

.garden.is-alive [data-type="tamatar"] path[stroke] {
  stroke-dasharray: 1;
  animation: draw-in 0.5s ease-out both;
}

.garden.is-alive [data-type="tamatar"]  path[id="Vector 35"] { animation-delay: var(--d, 0s); animation-duration: 0.55s; }
.garden.is-alive [data-type="tamatar"]  path[id="Vector 40"] { animation-delay: calc(var(--d, 0s) + 0.38s); animation-duration: 0.35s; }
.garden.is-alive [data-type="tamatar"]  path[id="Vector 41"] { animation-delay: calc(var(--d, 0s) + 0.46s); animation-duration: 0.35s; }
.garden.is-alive [data-type="tamatar"]  path[id="Vector 42"] { animation-delay: calc(var(--d, 0s) + 0.54s); animation-duration: 0.35s; }

.garden.is-alive [data-type="tamatar"] path[fill] {
  animation: leaf-in 0.55s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.garden.is-alive [data-type="tamatar"]  path[id="Vector 36"] { animation-delay: calc(var(--d, 0s) + 0.5s); animation-duration: 0.65s; }
.garden.is-alive [data-type="tamatar"]  path[id="Vector 37"] { animation-delay: calc(var(--d, 0s) + 0.62s); animation-duration: 0.65s; }
.garden.is-alive [data-type="tamatar"]  path[id="Vector 38"] { animation-delay: calc(var(--d, 0s) + 0.76s); animation-duration: 0.5s; }
.garden.is-alive [data-type="tamatar"]  path[id="Vector 39"] { animation-delay: calc(var(--d, 0s) + 0.86s); animation-duration: 0.5s; }

.garden.is-alive [data-type="tamatar"] circle {
  transform-origin: 50% 50%;
  animation: bloom-pop 0.35s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}

.garden.is-alive [data-type="tamatar"] circle[id="Ellipse 40"] { animation-delay: calc(var(--d, 0s) + 1s); }
.garden.is-alive [data-type="tamatar"] circle[id="Ellipse 42"] { animation-delay: calc(var(--d, 0s) + 1.08s); }
.garden.is-alive [data-type="tamatar"] circle[id="Ellipse 41"] { animation-delay: calc(var(--d, 0s) + 1.16s); }
.garden.is-alive [data-type="tamatar"] circle[id="Ellipse 43"] { animation-delay: calc(var(--d, 0s) + 1.23s); }

/* flowie: stem up, leaves out in pairs, then the tulip blooms —
   head, petals, and finally its lemon heart */

.garden.is-alive [data-type="flowie"] rect[id="Rectangle 18"] {
  animation: grow-up 0.45s cubic-bezier(0.3, 0, 0.2, 1) both;
  animation-delay: var(--d, 0s);
}

.garden.is-alive [data-type="flowie"] path[fill*="CCDCAF"] {
  animation: leaf-in 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.garden.is-alive [data-type="flowie"]  path[id="Vector 31"] { animation-delay: calc(var(--d, 0s) + 0.32s); animation-duration: 0.6s; }
.garden.is-alive [data-type="flowie"]  path[id="Vector 32"] { animation-delay: calc(var(--d, 0s) + 0.44s); animation-duration: 0.6s; }
.garden.is-alive [data-type="flowie"]  path[id="Vector 33"] { animation-delay: calc(var(--d, 0s) + 0.56s); }
.garden.is-alive [data-type="flowie"]  path[id="Vector 34"] { animation-delay: calc(var(--d, 0s) + 0.66s); }

.garden.is-alive [data-type="flowie"] circle[id="Ellipse 38"] {
  transform-origin: 50% 90%;
  animation: leaf-in 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  animation-delay: calc(var(--d, 0s) + 0.78s);
}

.garden.is-alive [data-type="flowie"] path[id="Subtract"],
.garden.is-alive [data-type="flowie"] path[id="Subtract_2"] {
  transform-origin: 50% 100%;
  animation: leaf-in 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  animation-delay: calc(var(--d, 0s) + 0.92s);
}

.garden.is-alive [data-type="flowie"] path[id="Subtract_2"] {
  animation-delay: calc(var(--d, 0s) + 0.99s);
}

.garden.is-alive [data-type="flowie"] circle[id="Ellipse 39"] {
  transform-origin: 50% 50%;
  animation: bloom-pop 0.35s cubic-bezier(0.34, 1.3, 0.64, 1) both;
  animation-delay: calc(var(--d, 0s) + 1.1s);
}

/* shroom: the stem and its curled foot push up together, the cap
   settles on top with a soft overshoot, then the little cap spot */

.garden.is-alive [data-type="shroom"] rect[id="Rectangle 12"],
.garden.is-alive [data-type="shroom"] path[id="Rectangle 13"] {
  animation: grow-up 0.5s cubic-bezier(0.3, 0, 0.2, 1) both;
  animation-delay: var(--d, 0s);
}

.garden.is-alive [data-type="shroom"] path[id="Polygon 6"] {
  animation: leaf-in 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) both;
  animation-delay: calc(var(--d, 0s) + 0.35s);
}

.garden.is-alive [data-type="shroom"] rect[id="Rectangle 14"] {
  transform-origin: 50% 50%;
  animation: bloom-pop 0.4s cubic-bezier(0.34, 1.3, 0.64, 1) both;
  animation-delay: calc(var(--d, 0s) + 0.52s);
}


.garden__flower-left {
  left: -37px;
  bottom: -40px;
  width: 231px;
  height: 690px;
}

.garden__flower-left-low {
  left: 30px;
  bottom: -245px;
  width: 231px;
  height: 690px;
}

.garden__berry-1 {
  left: 132px;
  bottom: 0;
  width: 90px;
  height: 180px;
}

.garden__mid-left {
  left: 261px;
  bottom: -4px;
  width: 117px;
  height: 202px;
}

.garden__berry-2 {
  left: 416px;
  bottom: 2px;
  width: 90px;
  height: 180px;
}

.garden__tulip {
  left: calc(50% + 198px);
  bottom: -5px;
  width: 123px;
  height: 154px;
}

.garden__girl {
  left: 50%;
  bottom: 15px;
  width: 116px;
  height: 259px;
  transform: translateX(-50%);
}

.garden__mid-right {
  right: 189px;
  bottom: -4px;
  width: 117px;
  height: 202px;
}

.garden__flower-small-right {
  right: 27px;
  bottom: -3px;
  width: 123px;
  height: 154px;
}

.garden__flower-right {
  right: 11px;
  bottom: -62px;
  width: 231px;
  height: 690px;
}

/* ── Story scenes ───────────────────────────────────── */

.scene__stack {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(1368px, 94vw);
}

.scene__stack--bean {
  top: 50%;
  translate: -50% -50%;
  gap: 80px;
}

.scene__stack--dolls {
  top: 50%;
  translate: -50% -50%;
  gap: 72px;
}

.scene__stack--draw {
  top: 50%;
  translate: -50% -50%;
  gap: 60px;
}

.scene__stack--quiet {
  top: 50%;
  translate: -50% -50%;
  gap: 60px;
}

.scene__stack--closing {
  top: 50%;
  translate: -50% -50%;
  gap: 40px;
}

/* the "what I'm looking for" list — a soft Tahini card under the
   closing scene's copy, one line per ask */

.hope-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  width: 397px;
  max-width: 88vw;
  padding: 20px 24px;
  background: var(--tahini);
  color: var(--belgian-chocolate);
  font-size: 18px;
  line-height: 1.35;
  text-align: left;
}

.hope-list li {
  position: relative;
  padding-left: 20px;
}

.hope-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
}

.scene__stack--cap {
  top: 50%;
  translate: -50% -50%;
  gap: 40px;
}

.scene__stack--hangers {
  top: 50%;
  translate: -50% -50%;
  gap: 50px;
}

.scene__stack--clouds {
  top: 50%;
  translate: -50% -50%;
  gap: 60px;
}

.scene__stack--marquee {
  top: 50%;
  translate: -50% -50%;
}

.scene__stack--rings {
  top: 50%;
  translate: -50% -50%;
  gap: 60px;
}

.caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 459px;
  max-width: 88vw;
  text-align: center;
}

.caption__headline {
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  width: 100%;
}

/* the newer Figma type styles (H2 / Body Large / Caption) */

.caption__headline--h2 {
  font-size: 36px;
  line-height: 44px;
  letter-spacing: -0.2px;
}

.caption__headline--h3 {
  font-size: 28px;
  line-height: 36px;
}

.caption__sub--lg {
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.25px;
}

.eyebrow--caption {
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.2px;
  font-feature-settings: normal;
}

.eyebrow--paprika {
  color: var(--pickled-red-chilli);
}

.caption__headline + .caption__headline {
  margin-top: 28px;
}

.caption__sub {
  font-size: 20px;
  line-height: 1.2;
  opacity: 0.5;
  width: 100%;
}

.caption__sub--draw {
  font-size: 24px;
  line-height: 1.1;
}

.caption--light {
  color: var(--lino-100);
}

.caption--wine {
  color: var(--mulberry-coulis);
}

.caption--wide {
  width: 459px;
}

/* Eyebrow chips ("Career pivot #1/#2") — highlight swipes in on entry */

.chip {
  position: relative;
  padding: 4px 6px;
  font-size: 20px;
  line-height: 1;
  font-feature-settings: "salt" 1, "ss01" 1, "ss02" 1, "ss03" 1, "ss04" 1,
    "ss05" 1, "ss06" 1, "ss07" 1, "ss08" 1, "ss09" 1, "ss10" 1, "ss11" 1,
    "ss12" 1;
  z-index: 0;
}

.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform-origin: left center;
  transform: scaleX(var(--chip, 0));
}

.chip--lemon::before {
  background: var(--lemon-peel);
}

.chip--paprika::before {
  background: var(--pickled-red-chilli);
}

.chip--paprika {
  color: var(--lino-100);
}

/* Scene 1: bean — a gentle idle float on top of the scroll choreography */

.bean {
  width: 171px;
  height: 241px;
  animation: bean-bob 3.2s ease-in-out infinite;
  will-change: transform;
}

@keyframes bean-bob {
  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }
  50% {
    translate: 0 -10px;
    rotate: 2deg;
  }
}

/* Scene 2: dolls */

.dolls {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 64px;
}

.dolls__group {
  display: flex;
  align-items: flex-end;
  gap: 40px;
}

.dolls__doll {
  width: 88.5px;
  height: 198px;
  will-change: transform, opacity;
}

.dolls__doll--me {
  width: 115.8px;
  height: 259px;
  will-change: auto;
}

.dolls__me {
  display: flex;
  align-items: flex-end;
  will-change: transform, opacity;
}

/* Scene 3: the drawing */

.drawing {
  width: 424px;
  height: 361.3px;
  will-change: transform, opacity;
}

/* ── Doodle states: story → nudge → canvas ──────────── */

.scene--draw {
  pointer-events: none;
}

.draw-art {
  position: relative;
  width: 424px;
  height: 361.3px;
  /* hovering the drawing (or its crayons) invites the doodle */
  pointer-events: auto;
}

.draw-art .drawing {
  position: absolute;
  inset: 0;
  transition: opacity 0.6s ease;
}

.drawing-dim {
  position: absolute;
  inset: 0;
  width: 424px;
  height: 361.3px;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.scene--draw.is-nudge .drawing {
  opacity: 0;
}

.scene--draw.is-nudge .drawing-dim {
  opacity: 1;
}

.draw-nudge-text {
  position: absolute;
  left: 50%;
  top: 110px;
  translate: -50% 0;
  width: 188px;
  font-size: 28px;
  line-height: 36px;
  text-align: center;
  color: var(--belgian-chocolate);
  opacity: 0;
  transition: opacity 0.5s ease 0.25s, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.scene--draw.is-nudge .draw-nudge-text {
  opacity: 1;
}

.scene--draw:not(.is-nudge) .draw-nudge-text {
  translate: -50% 14px;
  transition-delay: 0s;
}

.scene--draw.is-nudge .draw-caption {
  opacity: 0.1;
}

.draw-caption {
  transition: opacity 0.6s ease;
}

/* crayons scatter in around the paper, clickable */

.crayons {
  position: absolute;
  left: 0;
  top: 56px;
  width: 100%;
  height: 223.9px;
}

/* always present, resting just below and slightly smaller — hovering
   the doodle shifts them up into place rather than conjuring them
   from nothing */
.crayon {
  position: absolute;
  left: var(--cl);
  top: var(--ct);
  width: var(--cw);
  height: var(--chh);
  display: flex;
  align-items: center;
  justify-content: center;
  translate: 0 18px;
  scale: 0.92;
  opacity: 0;
  pointer-events: none;
  /* leaving: fade out together with the dim drawing, so only the
     drawing's own crayons remain */
  transition: opacity 0.3s ease, translate 0.45s cubic-bezier(0.34, 1.3, 0.64, 1), scale 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.scene--draw.is-nudge .crayon {
  translate: 0 0;
  scale: 1;
  opacity: 1;
  pointer-events: auto;
  transition-delay: calc(0.3s + var(--k) * 90ms);
}

.crayon__stick {
  width: 18px;
  height: var(--clen);
  background: var(--crayon-color, #dd3d23);
  rotate: var(--cr);
  transition: box-shadow 0.15s ease, scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.crayon:hover .crayon__stick {
  box-shadow: 0 0 0 2.5px var(--lino-100);
  scale: 1.08;
}

.crayon:hover {
  transition-delay: 0s;
}

/* the story stack steps aside when the canvas opens */

.draw-story {
  transition: opacity 0.45s ease, scale 0.5s ease;
}

.scene--draw.is-canvas .draw-story {
  opacity: 0;
  scale: 0.92;
  pointer-events: none !important;
}

/* ── The drawing board ──────────────────────────────── */

.board {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 48px;
  margin-left: 95px;
  opacity: 0;
  scale: 0.6;
  visibility: hidden;
  transition: opacity 0.5s ease, scale 0.55s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s 0.5s;
}

.scene--draw.is-canvas .board {
  opacity: 1;
  scale: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s ease 0.15s, scale 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.board__canvas {
  width: min(1061px, 62vw);
  height: min(691px, calc(62vw * 0.651));
  background: var(--lino-100);
  cursor: crosshair;
  touch-action: none;
}

.board__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: min(691px, calc(62vw * 0.651));
}

.board__colors {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 16px 12px;
  background: rgba(253, 252, 247, 0.08);
  border-radius: 100px;
}

.swatch {
  width: 24px;
  height: 24px;
  border-radius: 100px;
  background: var(--c);
  transition: scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), border 0.15s ease;
}

.swatch:hover {
  scale: 1.25;
}

.swatch.is-active {
  border: 6px solid var(--lino-100);
}

.board__actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: 16px 12px;
  background: rgba(253, 252, 247, 0.08);
  border-radius: 100px;
}

.action {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  transition: background 0.15s ease, scale 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.action img {
  width: 20px;
  height: 20px;
}

.action:hover {
  background: rgba(253, 252, 247, 0.16);
  scale: 1.15;
}

.action:active {
  scale: 0.95;
}

/* ── Tooltips (crayons, swatches, actions) ──────────── */

.swatch,
.action {
  position: relative;
}

[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  z-index: 30;
  background: #4a4034;
  color: var(--lino-100);
  font-size: 14px;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 100px;
  white-space: nowrap;
  opacity: 0;
  translate: 0 4px;
  pointer-events: none;
  transition: opacity 0.18s ease, translate 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-tip]:hover::after {
  opacity: 1;
  translate: 0 0;
}

.crayon::after {
  bottom: calc(100% + 10px);
  left: 60%;
}

.swatch::after,
.action::after {
  right: calc(100% + 16px);
  top: 50%;
  translate: 0 calc(-50% + 4px);
}

.swatch:hover::after,
.action:hover::after {
  translate: 0 -50%;
}

/* Scene 7: the bulb hangs dark over "She realised" — then it clicks
   on and the rest of the thought arrives */

.bulb {
  position: relative;
  width: 155.9px;
  height: 217.8px;
}

.bulb img {
  position: absolute;
  left: 13.2px;
  top: 7.9px;
  width: 129.5px;
  height: 202px;
  rotate: 7.85deg;
  transition: opacity 0.25s ease;
}

.bulb__on {
  opacity: 0;
}

.scene--quiet.is-lit .bulb__on {
  opacity: 1;
  animation: bulb-pop 0.5s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.scene--quiet.is-lit .bulb__off {
  opacity: 0;
}

@keyframes bulb-pop {
  0% {
    scale: 1;
  }
  45% {
    scale: 1.05;
  }
  100% {
    scale: 1;
  }
}

/* phase 1 is the dark bulb alone; when the page settles the bulb lights
   and the full thought fades up (its space is reserved so the bulb never
   shifts) */

.quiet-text {
  display: flex;
  justify-content: center;
}

.quiet-t2 {
  opacity: 0;
  translate: 0 10px;
  transition: opacity 0.55s ease 0.1s, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.scene--quiet.is-lit .quiet-t2 {
  opacity: 1;
  translate: 0 0;
}

/* Scene 1: the California sun behind the bean */

/* the sun disc and the bean share one centre so the bean sits dead
   centre of the sun; rays overflow the box freely */
.bean-sun {
  position: relative;
  width: 305px;
  height: 305px;
}

.bean-sun .bean {
  position: absolute;
  left: 50%;
  top: 50%;
  /* margin-centred so the bob animation keeps `translate` to itself */
  margin: -120.5px 0 0 -85.5px;
}

.sun-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 677px;
  height: 677px;
  margin: -338.5px 0 0 -338.5px;
  animation: rays-turn 90s linear infinite;
  will-change: transform, opacity;
}

@keyframes rays-turn {
  from {
    rotate: 0deg;
  }
  to {
    rotate: 360deg;
  }
}

.sun-disc {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 305px;
  height: 305px;
  margin: -152.5px 0 0 -152.5px;
  will-change: transform, opacity;
}

/* Scenes 4 & 7: the grad cap */

.cap-box {
  width: 590px;
  height: 357px;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.cap-art {
  width: 561.6px;
  height: 299.5px;
  rotate: -6.04deg;
  animation: cap-sway 4.5s ease-in-out infinite;
  will-change: transform;
}

@keyframes cap-sway {
  0%,
  100% {
    translate: 0 0;
    transform: rotate(0deg);
  }
  50% {
    translate: 0 -8px;
    transform: rotate(1.6deg);
  }
}

/* Scene 5: clouds and rain (inline SVG injected by story.js) */

.clouds-art {
  position: relative;
  width: 404px;
  height: 326.3px;
}

.clouds-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 404px;
  height: 302.4px;
  will-change: transform;
}

.girl-spot {
  position: absolute;
  left: 169.1px;
  top: 178.9px;
  width: 65.9px;
  height: 147.3px;
  will-change: transform, opacity;
}

.girl-spot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* When the rain hits, the poofy hair deflates: the volume collapses
   downward (losing height and width around the crown) and fades, while
   the flat wet hair drops into place beneath it — reads as the blob
   going limp. Both share a crown pivot so they morph in the same spot. */

.girl-spot__poofy {
  transform-origin: 50% 22%;
  transition: opacity 0.5s ease 0.15s,
    scale 0.65s cubic-bezier(0.5, 0, 0.35, 1) 0.05s;
}

.girl-spot__wet {
  opacity: 0;
  transform-origin: 50% 22%;
  scale: 1 0.9;
  transition: opacity 0.55s ease 0.2s,
    scale 0.6s cubic-bezier(0.34, 1.3, 0.64, 1) 0.2s;
}

.scene--clouds.is-storm .girl-spot__poofy {
  opacity: 0;
  scale: 0.8 0.55;
}

.scene--clouds.is-storm .girl-spot__wet {
  opacity: 1;
  scale: 1 1;
}

/* the caption holds back until the storm breaks */

.storm-caption {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.55s ease 0.25s, translate 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.scene--clouds.is-storm .storm-caption {
  opacity: 1;
  translate: 0 0;
}

.clouds-box svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* rain = the stroked, dashed paths; dashoffset makes the dashes fall */

.clouds-box path[stroke-dasharray] {
  animation: rain-fall 1.4s linear infinite;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.scene--clouds.is-storm .clouds-box path[stroke-dasharray] {
  opacity: 1;
}

@keyframes rain-fall {
  from {
    stroke-dashoffset: 0;
  }
  to {
    /* exactly 3 dash cycles (3 x 13.04) so the loop is seamless */
    stroke-dashoffset: -39.12;
  }
}

/* clouds = the filled paths; JS drifts them in from the sides */

.clouds-box path:not([stroke-dasharray]) {
  will-change: transform;
}

/* Scene 6: hangers swing in one by one (inline SVG injected by story.js) */

.hangers-box {
  width: 318px;
  height: 308px;
}

.hangers-box svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.hangers-box path {
  transform-box: fill-box;
  transform-origin: 50% 8%;
  opacity: 0;
  translate: 0 -46px;
  rotate: 14deg;
  transition: opacity 0.35s ease-out, translate 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    rotate 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
}

.scene--hangers.is-hung .hangers-box path {
  opacity: 1;
  translate: 0 0;
  rotate: 0deg;
  animation: hanger-sway 3.6s ease-in-out infinite;
}

.hangers-box path:nth-of-type(1) {
  transition-delay: 0ms;
}

.hangers-box path:nth-of-type(2) {
  transition-delay: 140ms;
  animation-delay: -1.2s !important;
}

.hangers-box path:nth-of-type(3) {
  transition-delay: 280ms;
  animation-delay: -2.4s !important;
}

@keyframes hanger-sway {
  0%,
  100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2.4deg);
  }
}

/* Scene 8: the selection marquee draws itself, cursor in tow */

.marquee {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 645px;
  height: 439px;
  translate: -50% -50%;
}

.marquee__box {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--draw, 0) * 100%);
  height: calc(var(--draw, 0) * 100%);
  border: 4px dashed var(--taro);
}

.marquee__handle {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--taro);
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.2s ease-out, scale 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scene--marquee.is-selected .marquee__handle {
  opacity: 1;
  scale: 1;
}

.marquee__handle--tl {
  left: -8px;
  top: -8px;
}

.marquee__handle--tr {
  right: -8px;
  top: -8px;
}

.marquee__handle--bl {
  left: -8px;
  bottom: -8px;
}

.marquee__handle--br {
  right: -8px;
  bottom: -8px;
}

.marquee__cursor {
  position: absolute;
  width: 55px;
  height: 61px;
  left: calc(var(--draw, 0) * 100% + 6px);
  top: calc(var(--draw, 0) * 100% + 8px);
  will-change: left, top;
}

.scene--marquee.is-selected .marquee__cursor {
  animation: cursor-nudge 2.8s ease-in-out infinite;
}

@keyframes cursor-nudge {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 4px 5px;
  }
}

/* Scene 9: the industry rings — each circle arrives one by one with a
   motion that suits it, and each icon reacts on hover */

.rings {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}

.ring-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.ring {
  position: relative;
  width: 175px;
  height: 175px;
  border-radius: 50%;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.ring--health {
  background: var(--belgian-chocolate);
}
.ring--compliance {
  background: var(--pickled-red-chilli);
}
.ring--restaurant {
  background: var(--mud);
}
.ring--legal {
  background: var(--tahini);
}

.ring svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ring .ic,
.ring [id="Frame 102"],
.ring [id="Frame 104"] {
  transform-box: fill-box;
}

.ring__label {
  font-size: 20px;
  line-height: 1.2;
  color: var(--belgian-chocolate);
}

/* ── Entrance: each badge settles in softly, one by one ──── */

.scene--rings.is-in .ring {
  opacity: 1;
  /* `backwards` fill keeps the ring hidden through its stagger delay,
     then reverts to a bare transform so hover-scale stays free */
  animation: ring-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.scene--rings.is-in .ring-item:nth-child(1) .ring {
  animation-delay: 0.05s;
}
.scene--rings.is-in .ring-item:nth-child(2) .ring {
  animation-delay: 0.22s;
}
.scene--rings.is-in .ring-item:nth-child(3) .ring {
  animation-delay: 0.39s;
}
.scene--rings.is-in .ring-item:nth-child(4) .ring {
  animation-delay: 0.56s;
}

/* a quiet rise: fades up from just below with a whisper of scale */
@keyframes ring-in {
  0% {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes gavel-bang {
  0% {
    transform: rotate(-34deg);
  }
  55% {
    transform: rotate(7deg);
  }
  74% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0);
  }
}

/* ── Hover: each icon reacts in character ──────────── */

.ring {
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.scene--rings.is-in .ring:hover {
  transform: scale(1.06);
}

/* Health — the brain keeps beating */
.ring--health:hover .ic {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: heartbeat 0.85s ease-in-out infinite;
}

@keyframes heartbeat {
  0%,
  100% {
    transform: scale(1);
  }
  15% {
    transform: scale(1.09);
  }
  30% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.05);
  }
  60% {
    transform: scale(1);
  }
}

/* Compliance — the approval check pops */
.ring--compliance:hover [id="Frame 102"] {
  transform-origin: 50% 50%;
  animation: check-pop 0.5s cubic-bezier(0.34, 1.5, 0.5, 1);
}

@keyframes check-pop {
  0% {
    transform: scale(1);
  }
  40% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

/* Restaurant — the cake gives an appetising little wobble */
.ring--restaurant:hover .ic {
  transform-box: fill-box;
  transform-origin: 50% 90%;
  animation: cake-wobble 0.7s ease-in-out;
}

@keyframes cake-wobble {
  0%,
  100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-4deg) translateY(-3px);
  }
  55% {
    transform: rotate(3deg) translateY(-1px);
  }
  80% {
    transform: rotate(-1.5deg);
  }
}

/* Legal — the gavel bangs again */
.ring--legal:hover [id="Frame 104"] {
  transform-origin: 78% 82%;
  animation: gavel-bang 0.55s cubic-bezier(0.3, 0.7, 0.4, 1);
}

/* ── Reduced motion ─────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .garden > *,
  .plant,
  .plant__color,
  .plant__color path,
  .plant__color circle,
  .plant__color rect,
  .header,
  .hero,
  .hero__hello,
  .hero__line .ch,
  .hero__sub .ch,
  .btn-watch {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
  }

  .plant__color {
    transition: none;
  }

  .garden.is-alive .plant {
    animation: none !important;
  }

  .bean,
  .cap-art,
  .sun-rays,
  .journey__hint,
  .clouds-box path,
  .hangers-box path,
  .marquee__cursor {
    animation: none;
  }

  /* rings simply appear, no per-item motion */
  .scene--rings.is-in .ring {
    animation: none;
    opacity: 1;
  }

  /* the projector just switches on */
  .project-on .stage {
    animation: none;
    opacity: 1;
  }
  .ring:hover .ic,
  .ring:hover [id="Frame 102"],
  .ring:hover [id="Frame 104"] {
    animation: none;
  }

  .journey__hint {
    opacity: 0.3;
  }

  .work-item__icon,
  .work-item__icon-star,
  .work-item__title,
  .work__panel {
    transition: none;
  }

  .work-item,
  .work__panel,
  .work__girl-wrap,
  .work__badge,
  .work__panel-summary .word {
    animation-duration: 0.01s !important;
    animation-delay: 0s !important;
  }
}

/* ── Work page ────────────────────────────────────────
   An experiment: a project index that appears when "Work" is
   clicked. Hovering a title turns its little flower marker 45°
   and purple, and swaps that project's summary into the panel
   on the right.

   It's a fixed, opaque overlay above the home page rather than a
   swap-in-place — home is never hidden or reset underneath, so
   leaving via the logo/name is always just a simple fade, never a
   replay of the entrance choreography. */

.work {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  background: var(--lino-100);
  opacity: 1;
  transition: opacity 0.35s ease;
}

.work.closing {
  opacity: 0;
  pointer-events: none;
}

/* the content frame: 96px in from the left and right edges (its width
   is whatever that leaves), centred vertically on the page rather than
   pinned to a top/bottom offset — independent of the header above it */
/* the list is what gives this frame its height — the panel is pinned
   to that height via absolute positioning (not flex stretch), so its
   own content (idle vs. hover) can never nudge the frame's size */
.work__body {
  position: absolute;
  top: 50%;
  left: 96px;
  right: 96px;
  translate: 0 -50%;
}

.work__list-col {
  width: 575px;
  max-width: 100%;
}

.work__title {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -0.3px;
  margin-bottom: 50px;
}

.work__list {
  display: flex;
  flex-direction: column;
  gap: 36px;
  list-style: none;
}

/* the list loads in top to bottom once the avatar has settled */
.work-item {
  display: flex;
  align-items: center;
  outline: none;
  opacity: 0;
  animation: work-item-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.work-item:nth-child(1) {
  animation-delay: 0.65s;
}
.work-item:nth-child(2) {
  animation-delay: 0.74s;
}
.work-item:nth-child(3) {
  animation-delay: 0.83s;
}
.work-item:nth-child(4) {
  animation-delay: 0.92s;
}
.work-item:nth-child(5) {
  animation-delay: 1.01s;
}

@keyframes work-item-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.work-item__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.work-item__icon {
  width: 24px;
  height: 24px;
  margin-right: 6px;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.34, 1.15, 0.64, 1);
}

.work-item:hover .work-item__icon,
.work-item:focus .work-item__icon,
.work-item:focus-within .work-item__icon {
  transform: rotate(45deg);
}

.work-item__icon-star {
  transition: fill 0.2s ease;
}

.work-item:hover .work-item__icon-star,
.work-item:focus .work-item__icon-star,
.work-item:focus-within .work-item__icon-star {
  fill: var(--taro);
}

.work-item__title {
  font-size: 22px;
  line-height: 30px;
  color: var(--belgian-chocolate);
  text-decoration: none;
  outline: none;
  transition: color 0.2s ease;
}

.work-item:hover .work-item__title,
.work-item:focus .work-item__title,
.work-item:focus-within .work-item__title {
  color: var(--taro);
}

.work-item__badge {
  flex-shrink: 0;
  background: var(--lemon-peel);
  border-radius: 100px;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: -0.2px;
}

/* the panel and the girl sit in one flush row, bottom-aligned — she
   stands right at the panel's edge, so the summary reads as something
   she's saying, not a floating tooltip. This whole row stretches to
   match the list column's height. */
.work__panel-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 670px;
  max-width: calc(100% - 595px);
  display: flex;
  align-items: flex-end;
}

/* loads in last, after the list has finished */
.work__panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(33, 25, 13, 0.3);
  overflow: hidden;
  opacity: 0;
  animation: work-panel-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.5s;
  transition: border-color 0.25s ease;
}

@keyframes work-panel-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.work.has-active-summary .work__panel {
  border-color: var(--belgian-chocolate);
  align-items: flex-start;
  justify-content: flex-start;
}

.work__panel-idle {
  max-width: 291px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  font-size: 20px;
  line-height: 1.3;
  color: rgba(33, 25, 13, 0.55);
  text-align: center;
}

.work__panel-active {
  display: none;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  height: 100%;
  padding: 29px 30px 30px;
  box-sizing: border-box;
  overflow: hidden;
  text-align: left;
}

.work.has-active-summary .work__panel-idle {
  display: none;
}

.work.has-active-summary .work__panel-active {
  display: flex;
}

.work.has-active-summary .work__panel-avatar {
  display: block;
}

.work__panel-label {
  font-size: 24px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--belgian-chocolate);
}

.work__panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.work__panel-tag {
  padding: 10px;
  border-radius: 100px;
  font-size: 16px;
  line-height: 1.3;
  white-space: nowrap;
}

.work__panel-tag--0 {
  background: var(--green-paint);
  color: var(--lino-100);
}
.work__panel-tag--1 {
  background: var(--mulberry-coulis);
  color: var(--lino-100);
}
.work__panel-tag--2 {
  background: var(--tahini);
  color: var(--belgian-chocolate);
}
.work__panel-tag--3 {
  background: var(--pickled-red-chilli);
  color: var(--lino-100);
}

.work__panel-summary {
  font-size: 16px;
  line-height: 1.3;
}

.work__panel-summary p {
  margin: 0 0 20px;
}

.work__panel-summary p:last-child {
  margin-bottom: 0;
}

.work__panel-summary .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  animation: char-in 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  animation-delay: calc(var(--i) * 28ms);
}

/* a stand-in for a project logo — only shown once a project's summary
   is actually filled in, not in the empty idle state */
.work__panel-avatar {
  display: none;
  position: absolute;
  top: 15px;
  right: 17px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: var(--work-avatar-bg);
}

/* she moves in from the left as the page opens, landing flush against
   the panel's right edge, bottom-aligned with it in the same row */
.work__girl-wrap {
  position: relative;
  flex-shrink: 0;
  width: 115.805px;
  height: 259px;
  animation: work-girl-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.work__girl {
  display: block;
  width: 100%;
  height: 100%;
}

/* the project badge — floats above her head, slowly levitating, and
   swaps to match whichever project title is hovered */
.work__badge {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: 12px;
  width: 60px;
  height: 60px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  animation: work-badge-float 3.5s ease-in-out infinite;
}

.work__badge.is-visible {
  opacity: 1;
}

@keyframes work-badge-float {
  0%,
  100% {
    translate: -50% 0;
  }
  50% {
    translate: -50% -10px;
  }
}

@keyframes work-girl-in {
  from {
    translate: -360px 0;
  }
  to {
    translate: 0 0;
  }
}

/* portfolio port: no landing scene — the page is only the theatre */
.scene--hero { display: none !important; }
.journey__pin { background: #21190d; }
.journey__pin.leaving { background: #21190d; }
body { background: #21190d; }

/* hover crayons sit exactly on the drawing's own crayons (same set,
   same spots), so hovering just lifts them out of the dimmed drawing */
.crayons { top: 0; height: 100%; }
.crayon { transform-origin: 0 0; rotate: var(--cr); display: block; }
.crayon__stick { display: block; width: 100%; height: 100%; rotate: none; }
/* the hovered crayon (and its colour name) always sits on top, and the
   name stays level instead of tilting with the crayon */
.crayon:hover { z-index: 10; }
.crayon::after { left: 50%; bottom: calc(100% + 8px); transform-origin: 0 100%; rotate: calc(var(--cr) * -1); }
/* the film is scaled down into the screen (~0.58), so tooltips are set
   larger here to read at a comfortable ~14px on screen */
[data-tip]::after { font-size: 24px; padding: 9px 16px; }

/* ══════════════════════════════════════════════════════════════
   Figma "My journey" (250:15674) update + responsive fit.
   The whole room is a fixed 1512×896 composition, scaled to fit the
   viewport (JS sets --fit = min(vw/1512, vh/896)) and centred, so the
   dark room fills any extra space on the sides and nothing is ever
   cropped or pushed behind a scroll. Stage values below are the Figma
   screen values (882×520) × 1.7143.
   ══════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-opsz-normal.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

.journey__pin { min-height: 0; }
.journey__frame {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1512px;
  height: 896px;
  translate: -50% -50%;
  scale: var(--fit, 1);
}

/* room chrome */
.exit {
  width: auto;
  height: 32px;
  gap: 8px;
  padding: 7px 9px 7px 12px;
  border: 0;
  background: rgba(221, 61, 35, 0.21);
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0.18px;
}
/* bottoms line up with the screen's bottom edge, outer edges stay put */
.exit--left { left: 76px; top: 578px; }

/* "GO TO PRODUCT DESIGN" (Figma 250:22100, Frame 117): skips ahead to
   "And 3 years in"; only shown up to the "Enter Product design" scene */
.jump {
  position: absolute; left: auto; right: 56px; top: 578px;
  height: 32px; padding: 7px 9px 7px 12px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: rgba(229, 222, 82, 0.3); color: #e5de52;
  font: 18px/18px "RX100", ui-monospace, monospace; letter-spacing: 0.18px; text-transform: uppercase;
  white-space: nowrap; cursor: pointer; pointer-events: auto;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.35s ease, visibility 0s;
}
.jump:hover { background: #e5de52; color: #21190d; transform: scale(1.06); }
.jump:active { transform: scale(0.97); }
.exit.is-away, .jump.is-away { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0s linear 0.35s; }

.journey__hint {
  bottom: 45px;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.25px;
}
@keyframes hint-in { to { opacity: 1; } }
/* "Scroll or use arrow keys!" at the top of the theatre (Figma 250:22100) */
.journey__swipe {
  position: absolute;
  left: 50%;
  top: calc(42 / 896 * 100%);
  translate: -50% 0;
  margin: 0;
  font-size: 18px;
  line-height: 27px;
  letter-spacing: -0.25px;
  color: rgba(253, 252, 247, 0.5);
  white-space: nowrap;
  pointer-events: none;
  z-index: 20;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* type: H2 28 / Newsreader body 16 / caption 12 (Figma screen px) */
.caption {
  width: 680.6px;
  max-width: none;
  gap: 13.7px;
}
.caption__headline,
.caption__headline--h2,
.caption__headline--h3 {
  font-size: 48px;
  line-height: 57.6px;
  letter-spacing: 0;
  color: #000;
}
.caption__sub,
.caption__sub--lg {
  font-family: "Newsreader", Georgia, serif;
  font-variation-settings: "opsz" 16;
  font-size: 27.43px;
  line-height: 41.14px;
  letter-spacing: -0.43px;
  color: rgba(39, 27, 10, 0.7);
  opacity: 1;
}
.eyebrow--caption {
  font-size: 21.2px;
  line-height: 21.2px;
  letter-spacing: 0.26px;
}
.scene--cap1 .eyebrow--caption { font-size: 22.3px; line-height: 22.3px; letter-spacing: 0; color: #000; }
.chip {
  padding: 6.86px;
  font-size: 24px;
  line-height: 24px;
  color: #000;
  font-feature-settings: normal;
}
.chip--paprika { color: var(--lino-100); }

/* every scene is laid out from the top of the screen, as in Figma */
.scene__stack { width: 1512px; translate: -50% 0; }
.scene__stack--bean { top: 138.6px; gap: 61.4px; }
.scene__stack--bean .caption,
.scene__stack--dolls .caption { width: 807.4px; }
.bean-sun { zoom: 1.327; }

.scene__stack--dolls { top: 129.2px; gap: 84.4px; }
.dolls { gap: 63.5px; }
.dolls__group { gap: 26.5px; }
.dolls__doll { width: 116.6px; height: 262.3px; }
.dolls__doll--me { width: 152.6px; height: 342.9px; }

.scene__stack--draw { top: 102.9px; gap: 69.6px; }
.draw-art { zoom: 1.1157; }
.scene__stack--draw .caption__headline { color: var(--belgian-chocolate); }

.scene__stack--cap { top: 93px; gap: 46px; }
.cap-box { zoom: 1.116; position: relative; left: -45px; }

/* clouds: alone and centred first; when the storm breaks they lift
   to make room for the caption */
.scene__stack--clouds {
  top: 116.2px;
  gap: 69.5px;
  transition: translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.scene--clouds:not(.is-storm) .scene__stack--clouds { translate: -50% 149px; }
.clouds-art { zoom: 1.116; }
.scene__stack--clouds .caption__headline { color: var(--belgian-chocolate); }

.scene__stack--hangers { top: 144px; gap: 57.8px; }
.hangers-box { zoom: 1.1165; }

/* the bulb: centred while dark, lifts as it lights */
.scene__stack--quiet {
  top: 177px;
  gap: 69.4px;
  transition: translate 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.scene--quiet:not(.is-lit) .scene__stack--quiet { translate: -50% 149px; }
.bulb { zoom: 1.116; }

.marquee { zoom: 1.116; }
.marquee__handle { width: 12.3px; height: 12.3px; }
.marquee__handle--tl { left: -6.1px; top: -6.1px; }
.marquee__handle--tr { right: -6.1px; top: -6.1px; }
.marquee__handle--bl { left: -6.1px; bottom: -6.1px; }
.marquee__handle--br { right: -6.1px; bottom: -6.1px; }
.scene__stack--marquee { top: 50%; translate: -50% -50%; }
.scene__stack--marquee .caption { width: 558.9px; }

.scene__stack--rings { top: 174px; gap: 103px; }
.rings { gap: 54.9px; }
.ring-item { gap: 20.6px; }
.ring { width: 195.4px; height: 195.4px; }
.ring--legal { background: #afc7dc; }
.ring__label {
  font-size: 24px;
  line-height: 24px;
  text-transform: uppercase;
  color: #000;
}

/* closing 1: "Are you hiring?" (Figma 259:6312; screen px x 1.714) */
.scene__stack--closing { top: 176.6px; translate: -50% 0; }
.scene__stack--designer { top: 114.3px; }   /* (156.7 - 90) x 1.714 */
.caption__headline--ink { color: #21190d; }
.caption--letter { width: 901.7px; gap: 27.4px; text-align: center; }
.caption__letter { color: rgba(39, 27, 10, 0.7); opacity: 1; }
.caption__headline--letter {
  width: auto;   /* one line, as in Figma */
  font-size: 54.86px;
  line-height: 60.34px;
  letter-spacing: -0.34px;
}
.caption__letter { display: flex; flex-direction: column; gap: 41.14px; }
.caption__letter p { margin: 0; }

/* closing 2: "And that's a wrap!" (Figma 264:6167; screen px x 1.714) */
.scene__stack--closing2 { top: 586.3px; gap: 41.1px; }
.caption--wrap { width: 680.6px; gap: 13.7px; text-align: center; }
.caption__headline--wrap { font-size: 48px; line-height: 57.6px; letter-spacing: 0; color: #000; }
.caption__sub--wrap {
  font-family: "Newsreader", Georgia, serif; font-size: 27.4px; line-height: 41.1px;
  letter-spacing: -0.43px; color: rgba(39, 27, 10, 0.7); opacity: 1;
}
.cta-row--wrap { gap: 20.6px; }
.cta.cta--wrap {
  height: 58.3px; padding: 10.3px 20.6px;
  font-size: 27.4px; line-height: 37.7px; letter-spacing: 0.38px;
}
.cta--ink { background: #21190d; }
/* the bows: drawn in, one after another, every time the slide settles */
.wrap-bows { position: absolute; left: 332.6px; top: 70.3px; width: 845.1px; height: 454.3px; overflow: visible; pointer-events: none; }
.wrap-bows .bow { transform-box: fill-box; transform-origin: 50% 50%; }
.wrap-bows path { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.scene--closing2.is-tied .wrap-bows path {
  stroke-dashoffset: 0; fill-opacity: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.45, 0, 0.25, 1) calc(var(--b) * 160ms),
              fill-opacity 0.4s ease calc(var(--b) * 160ms + 0.6s);
}
/* once tied, they hang there with a slow, slight sway */
.scene--closing2.is-tied .wrap-bows .bow { animation: bow-sway 5.5s ease-in-out calc(var(--b) * -0.9s + 1.4s) infinite; }
@keyframes bow-sway { 0%, 100% { rotate: -1.2deg; } 50% { rotate: 1.2deg; } }
@media (prefers-reduced-motion: reduce) {
  .wrap-bows path { stroke-dashoffset: 0; fill-opacity: 1; }
  .scene--closing2.is-tied .wrap-bows .bow { animation: none; }
}
.cta-row { display: flex; gap: 27.4px; pointer-events: auto; }
.cta {
  display: inline-flex;
  align-items: center;
  height: 65.1px;
  padding: 13.7px 24px;
  font-size: 37.7px;
  line-height: 37.7px;
  letter-spacing: 0.38px;
  color: var(--lino-100);
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.2s ease;
}
.cta--green { background: var(--green-paint); }
.cta--taro { background: var(--taro); }
.cta:hover { transform: translateY(-4px); filter: brightness(1.06); }
.cta:active { transform: translateY(0) scale(0.97); }

/* the drawing board takes over the whole room (it no longer plays
   inside the screen) */
.cinema > .board {
  position: absolute;
  inset: auto;
  left: 225px;
  top: 92px;
  width: 1157px;
  height: 691px;
  margin: 0;
  z-index: 30;
  justify-content: flex-start;
  gap: 48px;
}
.cinema > .board .board__canvas { width: 1061px; height: 691px; }
.cinema > .board .board__panel { height: 691px; width: 48px; }
.board__hint {
  position: absolute;
  left: 437px;
  top: 752px;
  margin: 0;
  width: 188px;
  text-align: center;
  font-size: 16px;
  line-height: 18px;
  color: #fff;
  opacity: 0.5;
  white-space: nowrap;
  pointer-events: none;
}
.journey__pin.doodling .board {
  opacity: 1;
  scale: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.5s ease 0.15s, scale 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.theater, .stage, .journey__hint { transition: opacity 0.45s ease; }
.journey__pin.doodling .theater,
.journey__pin.doodling .stage,
.journey__pin.doodling .journey__hint,
.journey__pin.doodling .journey__swipe { opacity: 0 !important; pointer-events: none; }
/* the film never spills past the edge of the screen (sun rays etc.) */
.theater-on .stage { clip-path: inset(0); }

/* EXIT: the film stays scaled into its screen (and clipped to it) while the
   whole room slides off, instead of springing back to full size mid-slide;
   the "Scroll or use arrow keys!" note goes with it */
.journey__pin.leaving .stage {
  transform: translate(20.833%, 10.268%) scale(0.58333, 0.58036);
  clip-path: inset(0);
  transition: none;
}
.journey__pin.leaving .journey__swipe,
.journey__pin.leaving .journey__hint { opacity: 0 !important; transition: opacity 0.25s ease; }