/* =========================================================
   For Rihab — variables
   ========================================================= */
:root {
  --dark:        #16121f;
  --dark-soft:   #1d1830;
  --cream:       #fff6e8;
  --warm:        #4a2f3a;
  --rose:        #ffb3c7;
  --peach:       #ffd9b3;
  --gold:        #ffd166;
  --candle-pink: #ffd1dc;
  --candle-deep: #ff9eb5;

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  /* Cairo first (it has Arabic glyphs); Caveat as fallback for any
     stray English handwriting bits. */
  --script: 'Cairo', 'Caveat', 'Amiri', 'Noto Naskh Arabic', system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

/* Lock scrolling until the page-1 sequence has played all the way through —
   we don't want her scrolling past anything important. JS removes this
   once the scroll cue appears. Just overflow + touch-action — no height
   forcing, which was breaking section layout. */
html.scroll-locked,
html.scroll-locked body {
  overflow: hidden;
  touch-action: none;
}

body {
  font-family: var(--serif);
  font-weight: 400;
  background: var(--dark);
  color: var(--cream);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }

.section {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vh, 4rem) 1.25rem;
  overflow: hidden;
}

/* =========================================================
   THE HOOK (the only section)
   ========================================================= */
.section--hook { background: var(--dark); }

/* ----- Guy: drop-in, breathing, blink, meeting, startle, escape ----- */
.hook-head {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(150px, 30vw, 230px);
  /* All Y values use vh (or 0) — Mobile Safari refuses to interpolate
     transforms that mix % and vh on the Y axis. */
  transform: translate(-50%, -25vh) scale(1) rotate(0deg);
  transition: transform 1.1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  will-change: transform;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.45));
  pointer-events: none;
  z-index: 4;
}

.hook-head.is-dropping {
  transform: translate(-50%, 0) scale(1) rotate(0deg);
}

/* A quick scale jump of surprise — he reacts from his perch at the top. */
.hook-head.is-startled {
  transform: translate(-50%, 0) scale(1.22) rotate(0deg);
  transition: transform 0.18s cubic-bezier(0.34, 1.6, 0.64, 1);
}

/* Then he flees straight up and off-screen with a flail rotation. */
.hook-head.is-escaping {
  transform: translate(-50%, -200vh) scale(1) rotate(38deg);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.9, 0.4);
}

/* Instantly relocated below the screen (no animation) so the return rise
   starts from the bottom edge, not from his escape position above. */
.hook-head.is-below {
  transform: translate(-50%, 150vh) scale(1) rotate(0deg);
  transition: none;
}

/* He returns from below — comes up into the bottom of the screen. */
.hook-head.is-returning {
  transform: translate(-50%, 72vh) scale(1) rotate(0deg);
  transition: transform 1.2s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Then he ducks back down off-screen. */
.hook-head.is-leaving-down {
  transform: translate(-50%, 160vh) scale(1) rotate(0deg);
  transition: transform 1s cubic-bezier(0.55, 0, 0.85, 0.4);
}

.hook-head__breather {
  width: 100%;
  height: 100%;
  transform-origin: 50% 80%;
}

.hook-head.is-settled .hook-head__breather {
  animation: breathe 4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: translate(0, 0)        rotate(0deg); }
  25%      { transform: translate(2px, -10px)  rotate(2.4deg); }
  50%      { transform: translate(0, -4px)     rotate(0deg); }
  75%      { transform: translate(-2px, -10px) rotate(-2.4deg); }
}

.hook-head svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Eye blink */
.eye-layer {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 0.09s ease-out;
}

.eye-layer.is-blinking { transform: scaleY(0.05); }

/* Eyebrow raise — surprise reaction when he sees Rihab. */
.hook-head #Left_eyebrow,
.hook-head #Right_eyebrow {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.28s cubic-bezier(0.34, 1.6, 0.64, 1);
}

.hook-head.is-reacting #Left_eyebrow,
.hook-head.is-reacting #Right_eyebrow {
  transform: translateY(-10px);
}

/* ----- Speech bubble ----- */
.speech-bubble {
  position: absolute;
  top: clamp(80px, 12vh, 130px);
  left: calc(50% + clamp(80px, 16vw, 140px));
  background: var(--cream);
  color: var(--warm);
  padding: 0.7rem 1.15rem;
  border-radius: 20px;
  font-family: var(--script);
  font-weight: 600;
  font-size: clamp(1.35rem, 3.6vw, 1.85rem);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-6px) scale(0.95);
  transition: opacity .9s ease, transform .9s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  pointer-events: none;
  z-index: 5;
}

/* Big modifier — for the longer/bottom bubble. */
.speech-bubble.speech-bubble--big {
  font-size: clamp(1.55rem, 4.6vw, 2.25rem);
  padding: 0.85rem 1.4rem;
  border-radius: 22px;
}

.speech-bubble__text {
  display: inline-block;
  animation: bubble-pulse 2.4s ease-in-out infinite;
}

@keyframes bubble-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.92; }
  50%      { transform: scale(1.05); opacity: 1; }
}

.speech-bubble::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 16px;
  border: 8px solid transparent;
  border-right-color: var(--cream);
}

.speech-bubble.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Bottom bubble — identical styling to the first one, just anchored to the
   bottom instead of the top. The double-class selector (specificity 0,2,0)
   keeps the mobile media query from re-setting `top:` and stretching the
   bubble between top and bottom. */
.speech-bubble.speech-bubble--bottom {
  top: auto;
  bottom: clamp(80px, 12vh, 130px);
  /* Longer line → allow wrapping with a sensible max-width so it doesn't
     stretch past the screen edge. */
  white-space: normal;
  max-width: min(80vw, 340px);
  text-align: center;
  line-height: 1.2;
}

/* =========================================================
   Mimas (UNTOUCHED — preserved exactly)
   ========================================================= */
.mimas-stage {
  position: absolute;
  top: clamp(120px, 22vh, 220px);
  left: 50%;
  width: clamp(170px, 32vw, 240px);
  margin-left: calc(-1 * clamp(170px, 32vw, 240px) / 2);
  pointer-events: none;
  z-index: 3;
}

.mimas-springer {
  width: 100%;
  transform: translate3d(0, 120vh, 0) scale(0.55) rotate(0deg);
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5));
  will-change: transform;
}

.mimas-stage.is-running .mimas-springer {
  animation: run-toward 1.7s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes run-toward {
  0%   { transform: translate3d(0,  120vh, 0) scale(0.45) rotate(-2deg); }
  35%  { transform: translate3d(4vw, 60vh, 0) scale(0.7)  rotate(3deg); }
  65%  { transform: translate3d(-3vw, 18vh, 0) scale(0.9) rotate(-3deg); }
  85%  { transform: translate3d(2vw, -2vh, 0) scale(1.05) rotate(2deg); }
  100% { transform: translate3d(0,    0,   0) scale(1)    rotate(0deg); }
}

.mimas-stage.is-wandering .mimas-springer {
  animation: wander 18s ease-in-out infinite;
}

@keyframes wander {
  0%, 100% { transform: translate3d(0,      0,    0) scale(1)    rotate(0deg); }
  8%       { transform: translate3d(-30vw,  8vh,  0) scale(0.9)  rotate(-8deg); }
  18%      { transform: translate3d(-36vw, 32vh,  0) scale(0.85) rotate(-3deg); }
  30%      { transform: translate3d(-12vw, 58vh,  0) scale(0.95) rotate(6deg); }
  42%      { transform: translate3d(18vw,  64vh,  0) scale(1)    rotate(3deg); }
  55%      { transform: translate3d(34vw,  40vh,  0) scale(0.9)  rotate(-4deg); }
  68%      { transform: translate3d(36vw,  10vh,  0) scale(0.8)  rotate(7deg); }
  80%      { transform: translate3d(10vw,  46vh,  0) scale(1)    rotate(2deg); }
  92%      { transform: translate3d(-18vw, 28vh,  0) scale(0.95) rotate(-3deg); }
}

.mimas-stage svg { display: block; width: 100%; height: auto; }

.mimas-stage #Pointy_ears,
.mimas-stage #Tongue_out { display: none; }

.mimas-stage.is-alert #Normal_ears { display: none; }
.mimas-stage.is-alert #Pointy_ears { display: block; }

.mimas-stage.is-blepping #Normal_mouth { display: none; }
.mimas-stage.is-blepping #Tongue_out   { display: block; }

/* When the guy ducks down and Rihab follows, Mimas trails after them too.
   The wander animation on the springer keeps running internally, but the
   whole stage translates off-screen below. */
.mimas-stage.is-following {
  transform: translateY(160vh);
  transition: transform 2s cubic-bezier(0.55, 0, 0.6, 1);
}

/* =========================================================
   Rihab — silly walk, then alone & interactive
   ========================================================= */
.rihab {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(170px, 38vw, 260px);
  transform: translate(-50%, 150vh);           /* hidden far below */
  transition: transform 1.8s cubic-bezier(0.5, 0, 0.5, 1);
  z-index: 2;
  pointer-events: auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.5));
  will-change: transform;
}

/* Only her forehead/eyes peek above the bottom edge. */
.rihab.is-peeking {
  transform: translate(-50%, 38vh);
  transition: transform 0.85s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Walks up to centre-left — her own vertical centre at the section centre. */
.rihab.is-walking,
.rihab.is-resting {
  transform: translate(calc(-50% - 14vw), -50%);
  transition: transform 2s cubic-bezier(0.55, 0, 0.45, 1);
}

.rihab.is-resting { transition: transform 0.4s ease; }

/* After the guy escapes, she walks up to the top of the screen looking for him. */
.rihab.is-searching {
  transform: translate(-50%, calc(-50% - 32vh));
  transition: transform 1.4s cubic-bezier(0.5, 0, 0.5, 1);
}

/* When the guy returns from below and ducks away, she chases him down and off. */
.rihab.is-following {
  transform: translate(-50%, 150vh);
  transition: transform 1.8s cubic-bezier(0.55, 0, 0.6, 1);
}

.rihab__bobber {
  width: 100%;
  height: auto;
}

/* The bob + arm swing animations are driven by .is-stepping, applied
   whenever she's actively moving (walk-in OR searching up). */
.rihab.is-stepping .rihab__bobber {
  animation: rihab-bob 0.32s ease-in-out infinite alternate;
}

@keyframes rihab-bob {
  from { transform: translateY(0)    rotate(-3deg); }
  to   { transform: translateY(-12px) rotate(3deg); }
}

.rihab svg { display: block; width: 100%; height: auto; }

/* Arms swing wildly during stepping, pivoting from the shoulders. */
.rihab #Left_arm,
.rihab #Right_arm {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.rihab.is-stepping #Left_arm  { animation: arm-l 0.32s ease-in-out infinite alternate; }
.rihab.is-stepping #Right_arm { animation: arm-r 0.32s ease-in-out infinite alternate; }

@keyframes arm-l { from { transform: rotate(-48deg); } to { transform: rotate(42deg); } }
@keyframes arm-r { from { transform: rotate(42deg); }  to { transform: rotate(-48deg); } }

/* Pupils track Mimas — JS sets transform per frame, no CSS transition. */
.rihab #Left_pupill,
.rihab #Right_pupill {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Nose: tappable; pulses mouth + eyebrows. */
.rihab #Nose {
  cursor: pointer;
  pointer-events: bounding-box;
}

/* The new file ships TWO mouths: Normal_mouth (default) and Smiley_mouth
   (hidden until needed). Page 1 only ever uses the normal one. */
.rihab #Smiley_mouth { display: none; }

.rihab #Normal_mouth,
.rihab #Eyebrows {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 0.32s cubic-bezier(0.34, 1.55, 0.64, 1);
}

.rihab.is-tickled #Normal_mouth,
.rihab.is-tickled #Eyebrows {
  transform: scale(1.2);
}

/* =========================================================
   Scroll cue — only shown once everyone has left the screen.
   Big and centred so it can't be missed.
   ========================================================= */
.scroll-cue {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: rgba(255, 246, 232, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--script);
  font-weight: 700;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 5;
  pointer-events: none;
  text-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.scroll-cue__label {
  font-size: clamp(2.2rem, 9vw, 4rem);
  line-height: 1;
  text-align: center;
}

.scroll-cue__arrow {
  font-size: clamp(4.5rem, 18vw, 8rem);
  line-height: 1;
  margin-top: -4px;
}

.scroll-cue.is-visible {
  opacity: 1;
  animation: scroll-bob 1.8s ease-in-out infinite;
}

@keyframes scroll-bob {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% + 18px)); }
}

/* =========================================================
   Page 2 — the cake scene
   ========================================================= */
.section--cake {
  background: linear-gradient(180deg, #ffe4c0 0%, #ffd0a8 50%, #f7a4be 100%);
  color: var(--warm);
  position: relative;
  overflow: hidden;
}

/* ----- The cake, pushed slightly below centre so the text sits above it ----- */
.cake-display {
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* The "24" lives INSIDE the cake's top tier, centred. */
.cake__tier--top {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cake-number {
  font-family: var(--script);
  font-weight: 700;
  font-size: clamp(2.1rem, 8vw, 3.4rem);
  color: var(--warm);
  line-height: 1;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
  user-select: none;
}

.cake {
  position: relative;
  width: clamp(170px, 42vw, 260px);
  height: clamp(170px, 42vw, 260px);
  margin: 0 auto;
}

.cake__plate {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: 16px;
  background: linear-gradient(180deg, #d9b58a, #b88e5e);
  border-radius: 50%;
  box-shadow: 0 10px 18px rgba(74, 47, 58, 0.2);
}

.cake__tier {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 6px;
}

.cake__tier--bottom {
  bottom: 12px;
  width: 100%;
  height: 45%;
  background: linear-gradient(180deg, #f8c8c8 0%, #e88a8a 100%);
  box-shadow: inset 0 -10px 0 rgba(0,0,0,0.06);
}

.cake__tier--bottom::before {
  content: "";
  position: absolute;
  top: -8px;
  left: -2px;
  right: -2px;
  height: 18px;
  background: var(--cream);
  border-radius: 50% / 80%;
  box-shadow: 0 4px 0 rgba(0,0,0,0.04);
}

.cake__tier--top {
  bottom: calc(12px + 45% - 2px);
  width: 68%;
  height: 30%;
  background: linear-gradient(180deg, #ffe7b3 0%, #f6c869 100%);
}

.cake__tier--top::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -2px;
  right: -2px;
  height: 16px;
  background: var(--cream);
  border-radius: 50% / 80%;
  box-shadow: 0 4px 0 rgba(0,0,0,0.04);
}

.cake__candle {
  position: absolute;
  bottom: calc(12px + 45% + 30% - 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 60px;
  z-index: 2;
}

.cake__candle-body {
  position: absolute;
  bottom: 0;
  width: 16px;
  height: 40px;
  background: repeating-linear-gradient(180deg, var(--candle-deep) 0 7px, var(--candle-pink) 7px 14px);
  border-radius: 3px;
  box-shadow: inset -3px 0 0 rgba(0,0,0,0.08);
}

/* Flame is locked until Rihab arrives and smiles. */
.cake__flame-btn {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 48px;
  background: none;
  border: 0;
  padding: 0;
  cursor: not-allowed;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}

.cake-display.is-clickable .cake__flame-btn {
  cursor: pointer;
  pointer-events: auto;
}

/* When clickable, the flame glows brighter and a dashed ring pulses around
   the button so it's obvious you can tap it. */
.cake-display.is-clickable .cake__flame {
  box-shadow:
    0 0 22px rgba(255, 170, 80, 1),
    0 0 55px rgba(255, 170, 80, 0.6);
}

.cake-display.is-clickable .cake__flame-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px dashed var(--rose);
  pointer-events: none;
  animation: flame-ring 1.4s ease-in-out infinite;
}

@keyframes flame-ring {
  0%, 100% { transform: scale(0.85); opacity: 0; }
  50%      { transform: scale(1.15); opacity: 0.85; }
}

.cake__flame {
  display: block;
  width: 16px;
  height: 26px;
  background: radial-gradient(circle at 50% 75%, #fff5b8 0%, #ffc56b 55%, #ff7a3d 100%);
  border-radius: 50% 50% 22% 22% / 60% 60% 40% 40%;
  box-shadow:
    0 0 16px rgba(255, 170, 80, 0.85),
    0 0 36px rgba(255, 170, 80, 0.35);
  transform-origin: 50% 100%;
  animation: flicker 0.55s ease-in-out infinite alternate;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

@keyframes flicker {
  0%   { transform: scale(1)    rotate(-3deg) skewX(-2deg); }
  100% { transform: scale(1.08) rotate(3deg)  skewX(2deg); }
}

.cake__flame.is-out {
  opacity: 0;
  animation: none;
}

/* ----- Characters around the cake ----- */
.cake-character {
  position: absolute;
  top: 0;
  pointer-events: none;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.3));
  will-change: transform;
  transform: translate(-50%, -150vh) scale(1) rotate(0deg);
  transition: transform 2s cubic-bezier(0.5, 0, 0.5, 1);
}

.cake-me     { left: 22vw; width: clamp(110px, 28vw, 180px); z-index: 3; }
.cake-rihab  { left: 78vw; width: clamp(110px, 28vw, 180px); z-index: 3; }

/* Final resting positions — shifted down so the message can sit above them. */
.cake-me.is-arrived,
.cake-rihab.is-arrived {
  transform: translate(-50%, 38vh) scale(1) rotate(0deg);
}

/* They shift toward each other once the cake's gone, then walk off together.
   Only the OUTER arm swings on each character — the inner arms are "joined". */
.cake-me.is-holding-hands {
  transform: translate(calc(-50% + 18vw), 38vh) scale(1) rotate(0deg);
  transition: transform 1.2s cubic-bezier(0.5, 0, 0.5, 1);
}

.cake-rihab.is-holding-hands {
  transform: translate(calc(-50% - 18vw), 38vh) scale(1) rotate(0deg);
  transition: transform 1.2s cubic-bezier(0.5, 0, 0.5, 1);
}

/* Mohammed: outer arm = LEFT; inner (right) holds Rihab's hand. */
.cake-me.is-holding-hands #Left_arm  { animation: arm-l 0.32s ease-in-out infinite alternate; }
.cake-me.is-holding-hands #Right_arm { animation: none; transform: none; }

/* Rihab: outer arm = RIGHT; inner (left) holds Mohammed's hand. */
.cake-rihab.is-holding-hands #Right_arm { animation: arm-r 0.32s ease-in-out infinite alternate; }
.cake-rihab.is-holding-hands #Left_arm  { animation: none; transform: none; }

/* Walk away — translate down off-screen with body bobbing.
   The .is-holding-hands rules still apply, so only outer arms keep swinging. */
.cake-me.is-walking-away {
  transform: translate(calc(-50% + 18vw), 160vh) scale(1) rotate(0deg);
  transition: transform 2.5s cubic-bezier(0.55, 0, 0.6, 1);
}

.cake-rihab.is-walking-away {
  transform: translate(calc(-50% - 18vw), 160vh) scale(1) rotate(0deg);
  transition: transform 2.5s cubic-bezier(0.55, 0, 0.6, 1);
}

.cake-me.is-walking-away .cake-character__bobber,
.cake-rihab.is-walking-away .cake-character__bobber {
  animation: rihab-bob 0.32s ease-in-out infinite alternate;
}

/* Cake itself slides down off-screen. */
.cake-display.is-leaving {
  transform: translate(-50%, 150vh);
  transition: transform 1.4s cubic-bezier(0.5, 0, 0.85, 0.4);
}

/* ----- Mimas on page 2 — descends from above, then wanders freely ----- */
.cake-mimas-stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: clamp(70px, 18vw, 110px);
  pointer-events: none;
  z-index: 4;
  transform: translate(-50%, -150vh);
  transition: transform 2s cubic-bezier(0.5, 0, 0.5, 1);
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.35));
  will-change: transform;
}

.cake-mimas-stage.is-arrived {
  /* She lands in the same vertical band as Mohammed and Rihab. */
  transform: translate(-50%, 36vh);
}

.cake-mimas-wanderer {
  width: 100%;
  height: auto;
  will-change: transform;
}

.cake-mimas-stage.is-wandering .cake-mimas-wanderer {
  animation: wander 18s ease-in-out infinite;
}

.cake-mimas-stage svg { display: block; width: 100%; height: auto; }

/* Default: pointy ears + tongue out hidden, just like page 1 */
.cake-mimas-stage #Pointy_ears,
.cake-mimas-stage #Tongue_out { display: none; }

.cake-mimas-stage.is-alert #Normal_ears { display: none; }
.cake-mimas-stage.is-alert #Pointy_ears { display: block; }

.cake-mimas-stage.is-blepping #Normal_mouth { display: none; }
.cake-mimas-stage.is-blepping #Tongue_out   { display: block; }

/* Once she's wandering, she becomes tappable. */
.cake-mimas-stage.is-clickable {
  pointer-events: auto;
  cursor: pointer;
}

/* Startled by a tap: wander pauses where it is, and the whole cat scales up. */
.cake-mimas-stage.is-startled .cake-mimas-wanderer {
  animation-play-state: paused;
}

.cake-mimas-stage.is-startled svg {
  transform: scale(1.35);
  transition: transform 0.3s cubic-bezier(0.34, 1.6, 0.64, 1);
  transform-origin: 50% 50%;
}

/* Cat blink — squish the two eye layers (right eye's id has a trailing dot). */
.cake-mimas-stage #Left_eye,
.cake-mimas-stage [id="Right_eye."] {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 0.08s ease-out;
}

.cake-mimas-stage.is-mblink #Left_eye,
.cake-mimas-stage.is-mblink [id="Right_eye."] {
  transform: scaleY(0.05);
}

/* Then she dashes off the right side of the screen. */
.cake-mimas-stage.is-fleeing {
  transform: translate(160vw, -25vh) rotate(15deg);
  transition: transform 0.75s cubic-bezier(0.4, 0, 0.9, 0.4);
}

.cake-character__bobber {
  width: 100%;
  height: auto;
}

.cake-character svg,
.cake-mimas svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Stepping (bob + arm swing) — same idea as page 1 */
.cake-character.is-stepping .cake-character__bobber {
  animation: rihab-bob 0.32s ease-in-out infinite alternate;
}

.cake-character #Left_arm,
.cake-character #Right_arm {
  transform-box: fill-box;
  transform-origin: 50% 0%;
}

.cake-character.is-stepping #Left_arm  { animation: arm-l 0.32s ease-in-out infinite alternate; }
.cake-character.is-stepping #Right_arm { animation: arm-r 0.32s ease-in-out infinite alternate; }

/* Default: show Normal_mouth, hide Smiley_mouth. When .is-smiling fires, swap. */
.cake-rihab #Normal_mouth,
.cake-rihab #Smiley_mouth {
  transition: opacity 0.5s ease;
}

.cake-rihab #Smiley_mouth { display: block; opacity: 0; }

.cake-rihab.is-smiling #Normal_mouth { opacity: 0; }
.cake-rihab.is-smiling #Smiley_mouth { opacity: 1; }

/* ----- Candle hint (appears when the flame becomes tappable) ----- */
.candle-hint {
  position: absolute;
  bottom: clamp(14vh, 18vh, 22vh);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-family: var(--script);
  font-weight: 600;
  font-size: clamp(1.35rem, 4vw, 1.7rem);
  color: var(--warm);
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.6s ease;
  white-space: nowrap;
}

.candle-hint__arrow {
  font-size: 1.2em;
  line-height: 1;
}

.candle-hint.is-visible {
  opacity: 0.95;
  animation: candle-hint-bob 1.4s ease-in-out infinite;
}

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

/* ----- Final message (Arabic, ONE LINE AT A TIME) ----- */
/* Sits in the upper third — ABOVE all the characters and the cake. */
.final-message {
  position: absolute;
  top: 22%;
  left: 50%;
  width: min(94%, 38ch);
  transform: translate(-50%, -50%);
  z-index: 6;
  min-height: 3.8em;

  display: flex;
  align-items: center;
  justify-content: center;

  font-family: 'Cairo', 'Amiri', 'Noto Naskh Arabic', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  line-height: 1.35;
  text-align: center;
  color: var(--warm);

  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.final-message.is-visible { opacity: 1; }

.final-message__line {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.final-message__line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   Mobile fine-tuning
   ========================================================= */
@media (max-width: 600px) {
  .hook-head { width: clamp(130px, 38vw, 180px); }

  .speech-bubble {
    top: clamp(60px, 11vh, 110px);
    left: calc(50% + clamp(10px, 5vw, 40px));
    font-size: 1.1rem;
    padding: 0.5rem 0.85rem;
    max-width: min(70vw, 240px);
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
}