/* ================================================================
   HAPPIE HUB — CINEMATIC DAY ANIMATION v2.0
   Modern, vivid, auto-playing storyboard scenes
   ================================================================ */

/* ── SECTION ── */
.ct-section {
  padding: 80px 0 0;
  background: #f8fafc;
  overflow: hidden;
}
.ct-heading {
  text-align: center;
  margin-bottom: 48px;
  padding: 0 24px;
}
.ct-heading .section-subtitle {
  max-width: 480px;
  margin: 0 auto;
  color: #666;
  font-size: 15px;
  margin-top: 10px;
}

/* ── STAGE ── */
.ct-stage {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

/* ── SCENE SLIDES ── */
.ct-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s;
  will-change: opacity;
}
.ct-slide.active {
  opacity: 1;
  visibility: visible;
  /* Graceful "arrive": focus-in via blur (a filter, NOT a transform, so children
     never shift). One-shot, no fill-mode → reverts to no-filter after, so there's
     zero lingering cost while the scene keeps animating. */
  animation: ct-scene-arrive 0.7s cubic-bezier(0.22,1,0.36,1);
}
@keyframes ct-scene-arrive {
  from { filter: blur(4px); }
  to   { filter: blur(0); }
}

/* ── SKY BACKGROUNDS PER SCENE ── */
.ct-slide--0 { background: linear-gradient(180deg, #FF8C42 0%, #FFC870 30%, #FFE4B2 60%, #AEE2FF 100%); }
.ct-slide--1 { background: linear-gradient(180deg, #1A88D9 0%, #4BAEE8 35%, #74C8F5 65%, #C5E8FF 100%); }
.ct-slide--2 { background: linear-gradient(180deg, #0D74D9 0%, #2B94EF 45%, #7AC2FF 100%); }
.ct-slide--3 { background: linear-gradient(180deg, #C83400 0%, #E85A20 20%, #F57C40 45%, #F5A862 70%, #FAD080 100%); }
.ct-slide--4 { background: linear-gradient(180deg, #060C20 0%, #0E1A38 35%, #1A2F5C 65%, #243A6E 100%); }

/* ── CELESTIAL ELEMENTS ── */
/* Sun (slides 0-3) */
.ct-sun {
  position: absolute;
  border-radius: 50%;
  box-shadow:
    0 0 0 14px rgba(255,220,80,0.18),
    0 0 0 30px rgba(255,200,40,0.10),
    0 0 90px rgba(255,200,0,0.65),
    0 0 180px rgba(255,160,0,0.30);
  animation: sun-breathe 5s ease-in-out infinite;
}
@keyframes sun-breathe {
  0%,100% { box-shadow: 0 0 0 14px rgba(255,220,80,0.18), 0 0 0 30px rgba(255,200,40,0.10), 0 0 90px rgba(255,200,0,0.65), 0 0 180px rgba(255,160,0,0.30); }
  50%      { box-shadow: 0 0 0 20px rgba(255,220,80,0.25), 0 0 0 42px rgba(255,200,40,0.13), 0 0 120px rgba(255,200,0,0.8), 0 0 220px rgba(255,160,0,0.40); }
}
.ct-slide--0 .ct-sun { width:72px;height:72px; top:12%;left:14%; background:radial-gradient(circle at 38% 35%,#FFFDE7,#FFD600 55%,#FF8F00); }
.ct-slide--1 .ct-sun { width:64px;height:64px; top:10%;left:46%; background:radial-gradient(circle at 38% 35%,#FFFDE7,#FFD600 55%,#FF8F00); }
.ct-slide--2 .ct-sun { width:58px;height:58px; top:5%;left:50%; background:radial-gradient(circle at 38% 35%,#FFFDE7,#FFD600 55%,#FF8F00); }
.ct-slide--3 .ct-sun { width:80px;height:80px; top:36%;right:8%; background:radial-gradient(circle at 38% 35%,#FFCB5E,#FF7200 55%,#C83400); box-shadow: 0 0 0 16px rgba(255,120,0,0.2), 0 0 0 32px rgba(255,100,0,0.10), 0 0 90px rgba(255,100,0,0.6), 0 0 200px rgba(200,50,0,0.35); }

/* Moon (slide 4) */
.ct-moon {
  position: absolute;
  top:10%; right:12%;
  width:58px; height:58px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #FFFEF0, #F0E8C0);
  box-shadow: 0 0 0 8px rgba(255,250,220,0.12), 0 0 0 20px rgba(255,250,200,0.06), 0 0 50px rgba(255,240,180,0.5), 0 0 100px rgba(255,220,140,0.3);
  animation: moon-glow 6s ease-in-out infinite;
}
.ct-moon::before {
  content:'';
  position:absolute;
  top:-4px; right:-4px;
  width:44px; height:44px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #FFFEF0, #F0E8C0);
  /* Creates crescent illusion by overlapping */
  box-shadow: inset -10px -4px 0 rgba(30,40,70,0.85);
}
@keyframes moon-glow {
  0%,100% { box-shadow: 0 0 0 8px rgba(255,250,220,0.12),0 0 50px rgba(255,240,180,0.5),0 0 100px rgba(255,220,140,0.3); }
  50%      { box-shadow: 0 0 0 14px rgba(255,250,220,0.20),0 0 70px rgba(255,240,180,0.7),0 0 140px rgba(255,220,140,0.45); }
}

/* Stars (slide 4) */
.ct-stars { position:absolute; inset:0; overflow:hidden; }
.ct-star {
  position:absolute;
  border-radius:50%;
  background:white;
  animation: twinkle var(--d,3s) ease-in-out var(--delay,0s) infinite;
}
@keyframes twinkle {
  0%,100% { opacity:0.9; transform:scale(1); }
  50%      { opacity:0.1; transform:scale(0.4); }
}

/* Clouds */
.ct-cloud {
  position:absolute;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,0.08));
}
.ct-cloud-inner {
  background:rgba(255,255,255,0.92);
  border-radius:100px;
  position:relative;
}
.ct-cloud-inner::before,
.ct-cloud-inner::after {
  content:'';
  position:absolute;
  background:rgba(255,255,255,0.92);
  border-radius:50%;
}
.ct-cloud--a { top:18%; left:22%; animation: drift-a 26s ease-in-out infinite; }
.ct-cloud--a .ct-cloud-inner { width:120px;height:34px; }
.ct-cloud--a .ct-cloud-inner::before { width:58px;height:58px;top:-30px;left:14px; }
.ct-cloud--a .ct-cloud-inner::after  { width:40px;height:40px;top:-20px;left:56px; }
.ct-cloud--b { top:24%; right:20%; animation: drift-b 32s ease-in-out infinite; }
.ct-cloud--b .ct-cloud-inner { width:90px;height:26px; }
.ct-cloud--b .ct-cloud-inner::before { width:44px;height:44px;top:-24px;left:10px; }
.ct-cloud--b .ct-cloud-inner::after  { width:32px;height:32px;top:-16px;left:40px; }
@keyframes drift-a { 0%,100%{transform:translateX(0)} 50%{transform:translateX(14px)} }
@keyframes drift-b { 0%,100%{transform:translateX(0)} 50%{transform:translateX(-12px)} }

/* ── GROUND ── */
.ct-ground {
  position:absolute;
  bottom:0; left:0; right:0;
  height:80px;
  z-index:3;
}
.ct-ground-grass {
  position:absolute;
  top:0; left:0; right:0;
  height:16px;
  border-radius:8px 8px 0 0;
}
.ct-ground-earth {
  position:absolute;
  top:14px; bottom:0; left:0; right:0;
}
.ct-ground-path {
  position:absolute;
  top:0; bottom:0;
  left:50%; width:120px;
  transform:translateX(-50%);
}
.ct-slide--0 .ct-ground-grass,
.ct-slide--1 .ct-ground-grass { background:linear-gradient(90deg,#4CAF50,#66BB6A,#43A047); }
.ct-slide--2 .ct-ground-grass { background:linear-gradient(90deg,#388E3C,#4CAF50,#43A047); }
.ct-slide--3 .ct-ground-grass { background:linear-gradient(90deg,#2E7D32,#388E3C,#2E7D32); }
.ct-slide--4 .ct-ground-grass { background:linear-gradient(90deg,#1B5E20,#2E7D32,#1B5E20); }
.ct-slide--0 .ct-ground-earth,
.ct-slide--1 .ct-ground-earth,
.ct-slide--2 .ct-ground-earth { background:linear-gradient(180deg,#5D4037,#4E342E); }
.ct-slide--3 .ct-ground-earth { background:linear-gradient(180deg,#4E342E,#3E2723); }
.ct-slide--4 .ct-ground-earth { background:linear-gradient(180deg,#1a0a00,#0f0500); }
.ct-ground-path { background:linear-gradient(180deg,#D4A855,#B8935A); border-left:2px dashed rgba(255,255,255,0.15); border-right:2px dashed rgba(255,255,255,0.15); }

/* Rooftop & dinner have no lawn: restyle the ground strip into a building
   facade (rooftop) / dark indoor floor (dinner) so the deck/floor doesn't
   look like it's floating over grass. */
.ct-slide--3 .ct-ground-grass, .ct-slide--3 .ct-ground-path { display:none; }
.ct-slide--3 .ct-ground-earth { top:0; background:linear-gradient(180deg,#A6B2B8,#8A979E); }
.ct-slide--4 .ct-ground-grass, .ct-slide--4 .ct-ground-path { display:none; }
.ct-slide--4 .ct-ground-earth { top:0; background:linear-gradient(180deg,#2E1D14,#170D08); }

/* ── SCENE ELEMENTS CONTAINER ── */
.ct-elements { position:absolute; inset:0; bottom:80px; z-index:2; }

/* ── CHARACTER ── */
.ct-character {
  position:absolute;
  bottom:0;
  z-index:5;
}
/* Character body - modern flat design */
.ct-char {
  position:relative;
  width:56px;
}

/* Head */
.ct-char-head {
  width:50px; height:54px;
  border-radius:50% 50% 45% 45%;
  background:linear-gradient(160deg,#E8A97C,#D4956A);
  margin:0 auto 0;
  position:relative;
  box-shadow:0 4px 18px rgba(0,0,0,0.18);
}
/* Hair */
.ct-char-head::before {
  content:'';
  position:absolute;
  top:-10px; left:-4px; right:-4px;
  height:38px;
  background:#1C0A00;
  border-radius:50% 50% 30% 30% / 60% 60% 40% 40%;
  z-index:1;
}
/* Cheek glow */
.ct-char-head::after {
  content:'';
  position:absolute;
  bottom:12px; left:4px;
  width:12px; height:8px;
  border-radius:50%;
  background:rgba(255,150,100,0.35);
}
/* Eyes */
.ct-char-eye {
  position:absolute;
  top:22px;
  width:11px; height:13px;
  border-radius:50%;
  background:white;
  z-index:2;
}
.ct-char-eye--l { left:8px; }
.ct-char-eye--r { right:8px; }
.ct-char-eye::before { /* pupil */
  content:'';
  position:absolute;
  width:6px; height:7px;
  border-radius:50%;
  background:#1a0800;
  top:3px; left:2px;
}
.ct-char-eye::after { /* shine */
  content:'';
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background:white;
  top:3px; right:1px;
  z-index:3;
}
/* Smile */
.ct-char-smile {
  position:absolute;
  bottom:9px; left:50%;
  transform:translateX(-50%);
  width:20px; height:10px;
  border-radius:0 0 10px 10px;
  border:2.5px solid rgba(0,0,0,0.22);
  border-top:none;
  z-index:2;
}
/* Neck */
.ct-char-neck {
  width:16px; height:10px;
  background:linear-gradient(180deg,#D4956A,#C07A50);
  margin:0 auto;
}
/* Body */
.ct-char-body {
  width:48px; height:64px;
  border-radius:14px 14px 8px 8px;
  background:linear-gradient(160deg,#00C896,#00B894,#009A7A);
  margin:0 auto;
  position:relative;
  box-shadow:0 6px 20px rgba(0,0,0,0.2);
}
/* Shirt collar */
.ct-char-body::before {
  content:'';
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:0;
  height:0;
  border-left:8px solid transparent;
  border-right:8px solid transparent;
  border-top:16px solid rgba(255,255,255,0.18);
}
/* Pocket */
.ct-char-body::after {
  content:'';
  position:absolute;
  top:16px; left:6px;
  width:12px; height:10px;
  border-radius:2px;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.1);
}

/* Arms */
.ct-char-arm {
  position:absolute;
  top:6px;
  width:12px; height:44px;
  border-radius:6px;
  background:linear-gradient(180deg,#D4956A,#C07A50);
  transform-origin:top center;
}
.ct-char-arm--l { left:-12px; transform:rotate(10deg); }
.ct-char-arm--r { right:-12px; transform:rotate(-10deg); }

/* Legs */
.ct-char-legs {
  display:flex;
  gap:4px;
  justify-content:center;
  margin:0 auto;
  width:44px;
}
.ct-char-leg {
  width:16px; height:40px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#2D3436,#1a1f2e);
  transform-origin:top center;
  position:relative;
}
/* Shoes */
.ct-char-shoe {
  width:22px; height:10px;
  border-radius:5px 5px 4px 4px;
  background:#1C1C2E;
  position:absolute;
  bottom:-8px;
  left:50%;
  transform:translateX(-50%);
}
.ct-char-shoe::after {
  content:'';
  position:absolute;
  top:2px; left:2px; right:2px;
  height:2px;
  border-radius:1px;
  background:rgba(255,255,255,0.2);
}

/* ── CHARACTER ANIMATION STATES ── */
@keyframes walk-leg-l { 0%,100%{transform:rotate(-25deg)} 50%{transform:rotate(20deg)} }
@keyframes walk-leg-r { 0%,100%{transform:rotate(20deg)} 50%{transform:rotate(-25deg)} }
@keyframes walk-arm-l { 0%,100%{transform:rotate(22deg)} 50%{transform:rotate(-18deg)} }
@keyframes walk-arm-r { 0%,100%{transform:rotate(-18deg)} 50%{transform:rotate(22deg)} }
@keyframes char-bob   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
@keyframes eat-arm-r  { 0%,100%{transform:rotate(-50deg)} 50%{transform:rotate(-10deg)} }
@keyframes celebrate-l { 0%,100%{transform:rotate(-55deg)} 50%{transform:rotate(-75deg)} }
@keyframes celebrate-r { 0%,100%{transform:rotate(55deg)} 50%{transform:rotate(75deg)} }
@keyframes char-sit-l  { from,to { transform:rotate(65deg); } }
@keyframes char-sit-r  { from,to { transform:rotate(-65deg); } }

.ct-char--walking .ct-char-arm--l { animation:walk-arm-l 0.5s ease-in-out infinite; }
.ct-char--walking .ct-char-arm--r { animation:walk-arm-r 0.5s ease-in-out infinite; }
.ct-char--walking .ct-char-leg:first-child { animation:walk-leg-l 0.5s ease-in-out infinite; }
.ct-char--walking .ct-char-leg:last-child  { animation:walk-leg-r 0.5s ease-in-out infinite; }
.ct-char--walking { animation:char-bob 0.5s ease-in-out infinite; }

.ct-char--eating .ct-char-arm--r { animation:eat-arm-r 1.8s ease-in-out infinite; }

.ct-char--sitting .ct-char-leg:first-child { transform:rotate(65deg); }
.ct-char--sitting .ct-char-leg:last-child  { transform:rotate(-65deg); }
.ct-char--sitting .ct-char-arm--l { transform:rotate(-5deg); }
.ct-char--sitting .ct-char-arm--r { transform:rotate(-80deg); }

.ct-char--celebrating .ct-char-arm--l { animation:celebrate-l 0.85s ease-in-out infinite; }
.ct-char--celebrating .ct-char-arm--r { animation:celebrate-r 0.85s ease-in-out infinite 0.42s; }

/* ── SCENE: BREAKFAST ── */
/* Home Building */
.ct-home-bldg {
  position:absolute;
  right:10%; bottom:0;
}
.ct-home-wall {
  width:152px; height:170px;
  background:linear-gradient(160deg,#F5DEB3,#E8C88E,#D4A870);
  border-radius:6px 6px 0 0;
  position:relative;
  box-shadow:0 0 0 2px rgba(0,0,0,0.06), 12px 12px 40px rgba(0,0,0,0.15);
}
.ct-home-roof {
  position:absolute;
  top:-72px; left:-16px; right:-16px;
  height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:74px solid #C0572A;
  filter:drop-shadow(0 -4px 10px rgba(0,0,0,0.15));
}
.ct-home-door {
  position:absolute;
  bottom:0; left:50%;
  transform:translateX(-50%);
  width:36px; height:54px;
  background:linear-gradient(160deg,#6D4C41,#5D4037);
  border-radius:4px 4px 0 0;
}
.ct-home-door::after {
  content:'';
  position:absolute;
  right:8px; top:50%;
  transform:translateY(-50%);
  width:5px; height:5px;
  border-radius:50%;
  background:#FFD700;
}
.ct-home-win {
  position:absolute;
  width:34px; height:34px;
  border-radius:3px;
  overflow:hidden;
  box-shadow:0 0 0 2px rgba(0,0,0,0.1);
}
.ct-home-win::before {
  content:''; position:absolute;
  inset:0;
  background:linear-gradient(135deg,#AEE0F5,#74B9F0);
}
.ct-home-win::after {
  content:''; position:absolute;
  top:0; left:50%; bottom:0;
  width:2px;
  background:rgba(255,255,255,0.5);
}
/* Cross */
.ct-home-win > span {
  position:absolute;
  top:50%; left:0; right:0;
  height:2px;
  background:rgba(255,255,255,0.5);
  transform:translateY(-50%);
}
.ct-home-win--1 { top:40px; left:18px; }
.ct-home-win--2 { top:40px; right:18px; }
.ct-home-win--3 { top:90px; left:18px; }

/* Breakfast table */
/* Foreground floor plane (moved out of .ct-elements so legs reach the
   ground and the table paints in front of the grass, not behind it).
   bottom:46 → 46px-tall legs land at Y=0; plank surface ends up ~Y=60. */
.ct-bfast-setup {
  position:absolute;
  bottom:46px; left:30%;
  z-index:6;
}
.ct-table {
  width:160px; height:14px;
  background:linear-gradient(90deg,#8B6914,#A07820,#8B6914);
  border-radius:8px;
  box-shadow:0 5px 0 #6a500f, 0 8px 20px rgba(0,0,0,0.2);
  position:relative;
}
.ct-table-leg { /* Both legs via pseudo */
  position:absolute;
  bottom:-46px;
  width:10px; height:46px;
  background:#8B6914;
  border-radius:0 0 5px 5px;
}
.ct-table-leg--l { left:20px; }
.ct-table-leg--r { right:20px; }
.ct-bowl {
  position:absolute;
  top:-28px; left:22px; /* 28px tall → bottom rests on plank top edge */
  width:60px; height:28px;
  border-radius:0 0 34px 34px;
  background:linear-gradient(180deg,#E17055,#C0504A);
  border-top:2px solid rgba(0,0,0,0.08);
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.ct-bowl::before {
  content:'';
  position:absolute;
  top:-6px; left:8px; right:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,180,160,0.4);
}
.ct-steam-wrap { position:absolute; top:-32px; left:20px; } /* sits just above the (now lowered) bowl rim */
.ct-steam {
  position:absolute;
  width:5px;
  background:rgba(255,255,255,0.75);
  border-radius:5px;
  animation:steam-rise 2s ease-in-out infinite;
}
.ct-steam--1 { height:20px; left:0; animation-delay:0s; }
.ct-steam--2 { height:16px; left:10px; animation-delay:0.65s; }
.ct-steam--3 { height:22px; left:20px; animation-delay:1.3s; }
@keyframes steam-rise {
  0%   { opacity:0.8; transform:translateY(0) scaleX(1); }
  100% { opacity:0; transform:translateY(-26px) scaleX(2); }
}
.ct-chai-cup {
  position:absolute;
  top:-28px; right:20px; /* 28px tall → bottom rests on plank top edge */
  width:22px; height:28px;
  background:linear-gradient(180deg,#FDCB6E,#E6B84A);
  border-radius:3px 3px 5px 5px;
  box-shadow:0 3px 8px rgba(0,0,0,0.15);
}
.ct-chai-cup::after {
  content:'';
  position:absolute;
  right:-8px; top:8px;
  width:8px; height:10px;
  border:3px solid #FDCB6E;
  border-radius:0 6px 6px 0;
  border-left:none;
}

/* ── SCENE: OFFICE WALK ── */
.ct-city-bg {
  position:absolute;
  bottom:0; left:0; right:0;
  height:280px;
  display:flex;
  align-items:flex-end;
}
.ct-bldg {
  flex:1;
  border-radius:4px 4px 0 0;
  position:relative;
  overflow:hidden;
}
.ct-bldg::after {
  content:'';
  position:absolute;
  inset:10px 6px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,0.06) 0,rgba(255,255,255,0.06) 7px,transparent 7px,transparent 18px),
    repeating-linear-gradient(90deg,rgba(255,255,255,0.06) 0,rgba(255,255,255,0.06) 5px,transparent 5px,transparent 14px);
}
.ct-bldg--1 { height:145px; background:linear-gradient(180deg,#5B8DBE,#4A7CAD); margin-right:3px; }
.ct-bldg--2 { height:230px; background:linear-gradient(180deg,#3D6E9C,#2E5F8D); margin-right:3px; }
.ct-bldg--3 { height:100px; background:linear-gradient(180deg,#6B9ECC,#5A8DBB); margin-right:3px; }
.ct-bldg--4 { height:190px; background:linear-gradient(180deg,#4A7CAD,#3B6D9E); margin-right:3px; }
.ct-bldg--5 { height:130px; background:linear-gradient(180deg,#5B8DBE,#4A7CAD); }

.ct-office-sign {
  position:absolute;
  top:150px; left:20%; /* mounted on the tall building's upper facade, not floating in sky */
  background:linear-gradient(135deg,#00B894,#009A7A);
  color:white;
  padding:10px 18px;
  border-radius:10px;
  font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:14px;
  box-shadow:0 6px 24px rgba(0,184,148,0.4);
  z-index:4;
}
.ct-office-sign span {
  display:block;
  font-size:10px;
  font-weight:400;
  margin-top:2px;
  opacity:0.85;
}
.ct-office-sign::after {
  content:'';
  position:absolute;
  left:50%; top:100%;
  transform:translateX(-50%);
  width:6px; height:26px;
  background:#0a6b57; /* mounting post down onto the building */
}

/* Road */
.ct-road {
  position:absolute;
  bottom:0; left:0; right:0;
  height:50px;
  background:linear-gradient(180deg,#555,#444);
  z-index:1;
}
.ct-road::before {
  content:'';
  position:absolute;
  top:50%; left:0; right:0;
  height:3px;
  transform:translateY(-50%);
  background:repeating-linear-gradient(90deg,#FFD700 0,#FFD700 28px,transparent 28px,transparent 56px);
}

/* ── SCENE: LUNCH ── */
.ct-office-bldg-bg {
  position:absolute;
  right:6%; bottom:0;
  width:190px; height:220px;
  background:linear-gradient(160deg,#B2BEC3,#95A5A6);
  border-radius:4px 4px 0 0;
  box-shadow:0 0 0 2px rgba(0,0,0,0.06);
  overflow:hidden;
}
.ct-office-bldg-bg::before {
  content:'';
  position:absolute;
  inset:12px 8px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,0.1) 0,rgba(255,255,255,0.1) 8px,transparent 8px,transparent 20px),
    repeating-linear-gradient(90deg,rgba(255,255,255,0.1) 0,rgba(255,255,255,0.1) 6px,transparent 6px,transparent 16px);
}
/* Foreground floor plane (see .ct-bfast-setup). Legs land at Y=0. */
.ct-lunch-plate-wrap {
  position:absolute;
  bottom:46px; left:37%;
  z-index:6;
}
.ct-thali {
  width:90px; height:90px;
  border-radius:50%;
  background:linear-gradient(135deg,#E0E0E0,#C8C8C8);
  border:5px solid #AAA;
  display:flex;
  flex-wrap:wrap;
  padding:8px;
  gap:4px;
  align-items:center;
  justify-content:center;
  position:absolute;
  top:-88px; left:20px; /* 90px disc → bottom seats on the plank (2px overlap) */
  box-shadow:0 8px 24px rgba(0,0,0,0.15);
}
.ct-thali-bowl {
  border-radius:50%;
}
.ct-thali-bowl--1 { width:22px;height:22px; background:linear-gradient(135deg,#E17055,#C0504A); }
.ct-thali-bowl--2 { width:18px;height:18px; background:linear-gradient(135deg,#FDCB6E,#E6B84A); }
.ct-thali-bowl--3 { width:20px;height:20px; background:linear-gradient(135deg,#00B894,#009A7A); }
.ct-thali-bowl--4 { width:16px;height:16px; background:#fff; border:1px solid #ddd; }
.ct-wa-bubble {
  position:absolute;
  top:36px; right:18%;
  background:#128C7E;
  color:white;
  padding:10px 16px;
  border-radius:14px 14px 14px 4px;
  font-family:'Montserrat',sans-serif;
  font-weight:600; font-size:13px;
  box-shadow:0 6px 20px rgba(0,0,0,0.2);
  animation:pop-in 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.3s both;
  z-index:4;
}
.ct-wa-bubble::after {
  content:'📸 Food photo dropped!';
  display:block; font-size:11px; font-weight:400; margin-top:2px; opacity:0.85;
}
@keyframes pop-in {
  from{opacity:0;transform:scale(0.6) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

/* ── SCENE: ROOFTOP ── */
.ct-city-sil {
  position:absolute;
  bottom:0; left:0; right:0;
  height:240px;
  display:flex; align-items:flex-end;
}
.ct-sil {
  flex:1;
  border-radius:3px 3px 0 0;
  background:rgba(0,0,0,0.6);
}
.ct-sil--1{height:100px} .ct-sil--2{height:180px} .ct-sil--3{height:80px}
.ct-sil--4{height:150px} .ct-sil--5{height:115px} .ct-sil--6{height:195px} .ct-sil--7{height:90px}

.ct-rooftop-slab {
  position:absolute;
  bottom:0; left:0; right:0;
  height:90px;
  background:linear-gradient(180deg,#CFD8DC,#B0BEC5);
  z-index:2;
}
.ct-rooftop-slab::before {
  content:'';
  position:absolute;
  top:-24px; left:0; right:0;
  height:26px;
  background:repeating-linear-gradient(90deg,#DFE6E9 0,#DFE6E9 28px,transparent 28px,transparent 46px);
  border-top:4px solid #DFE6E9;
}
.ct-rooftop-laptop {
  position:absolute;
  bottom:88px; left:55%;
  transform:translateX(-50%);
  z-index:3;
}
.ct-laptop-base {
  width:96px; height:10px;
  background:#2D3436;
  border-radius:3px;
  position:relative;
}
.ct-laptop-base::before {
  content:'';
  position:absolute;
  bottom:10px; left:8px;
  width:80px; height:58px;
  background:#3D4F56;
  border-radius:5px 5px 0 0;
}
.ct-laptop-screen-inner {
  position:absolute;
  bottom:14px; left:12px;
  width:72px; height:50px;
  background:linear-gradient(135deg,#74b9ff,#0984E3,#00B894);
  border-radius:3px;
  animation:screen-flicker 4s ease-in-out infinite;
}
@keyframes screen-flicker {
  0%,100%{filter:brightness(1)} 50%{filter:brightness(1.25)}
}
.ct-plant-dec {
  position:absolute; z-index:3;
}
.ct-plant-dec--l { bottom:89px; left:18%; }
.ct-plant-dec--r { bottom:89px; right:24%; }
.ct-plant-pot-el {
  width:28px; height:22px;
  background:linear-gradient(180deg,#E17055,#C0504A);
  border-radius:3px 3px 6px 6px;
  margin:0 auto;
}
.ct-plant-emoji { font-size:30px; display:block; text-align:center; margin-bottom:-4px; line-height:1; }
.ct-city-glow {
  position:absolute;
  bottom:0; left:0; right:0;
  height:120px;
  background:linear-gradient(0deg,rgba(255,130,0,0.12),transparent);
  z-index:1; pointer-events:none;
}

/* ── SCENE: DINNER ── */
.ct-night-room {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%);
}
.ct-room-lamp {
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:200px; height:230px;
  background:radial-gradient(ellipse at top,rgba(255,220,150,0.22),transparent 68%);
  pointer-events:none;
}
.ct-string-lights {
  position:absolute;
  top:28px; left:8%; right:8%;
  height:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.ct-light-bulb {
  width:10px; height:12px;
  border-radius:50% 50% 40% 40%;
  animation:light-glow 1.5s ease-in-out infinite;
}
.ct-light-bulb:nth-child(odd)  { animation-delay:0s; }
.ct-light-bulb:nth-child(even) { animation-delay:0.75s; }
.ct-light-bulb:nth-child(3n)   { background:#FF6B6B; }
.ct-light-bulb:nth-child(3n+1) { background:#FFD700; }
.ct-light-bulb:nth-child(3n+2) { background:#74B9FF; }
@keyframes light-glow {
  0%,100%{opacity:0.6;filter:brightness(1)} 50%{opacity:1;filter:brightness(1.5)}
}
.ct-string-lights::before {
  content:'';
  position:absolute;
  top:6px; left:0; right:0;
  height:1px;
  background:rgba(255,255,255,0.2);
}
/* Foreground floor plane (see .ct-bfast-setup). 52px-tall legs land at Y=0. */
.ct-dinner-setup {
  position:absolute; bottom:52px; left:49%;
  transform:translateX(-50%);
  z-index:6;
}
.ct-dinner-tabletop {
  width:200px; height:16px;
  background:linear-gradient(90deg,#8B6914,#A07820,#8B6914);
  border-radius:10px;
  box-shadow:0 6px 0 #6a500f,0 12px 24px rgba(0,0,0,0.25);
  position:relative;
}
.ct-dinner-tabletop::before, .ct-dinner-tabletop::after {
  content:''; position:absolute;
  bottom:-52px; width:12px; height:52px;
  background:#8B6914; border-radius:0 0 6px 6px;
}
.ct-dinner-tabletop::before { left:24px; }
.ct-dinner-tabletop::after  { right:24px; }
.ct-dish {
  position:absolute;
  height:14px;
  top:-14px; /* bottom rests on the tabletop surface */
  border-radius:50%;
}
.ct-dish--1 { width:52px; left:20px; background:linear-gradient(135deg,#E17055,#C04040); }
.ct-dish--2 { width:40px; left:84px; background:linear-gradient(135deg,#FDCB6E,#E6A020); }
.ct-dish--3 { width:48px; right:20px; background:linear-gradient(135deg,#00B894,#009A7A); }

/* Friends */
.ct-friend {
  position:absolute;
  /* Sink so their lower bodies tuck behind the ground strip → they read as
     seated diners in the background instead of floating mid-air. */
  bottom:-40px; z-index:1;
}
.ct-friend--l { left:10%; }
.ct-friend--r { right:10%; }
.ct-friend-head {
  width:36px; height:36px;
  border-radius:50%;
  margin:0 auto 3px;
  border:2px solid rgba(0,0,0,0.1);
}
.ct-friend-body {
  width:42px; height:52px;
  border-radius:8px 8px 0 0;
  margin:0 auto;
}
.ct-friend--l .ct-friend-head { background:linear-gradient(135deg,#C68642,#A0692E); }
.ct-friend--l .ct-friend-body { background:linear-gradient(135deg,#6C5CE7,#5A4ED4); }
.ct-friend--r .ct-friend-head { background:linear-gradient(135deg,#D4956A,#B87045); }
.ct-friend--r .ct-friend-body { background:linear-gradient(135deg,#FD79A8,#E0609A); }

/* ── FLOATING EMOJI ── */
.ct-emoji {
  position:absolute;
  font-size:28px;
  animation:float-emoji var(--dur,4s) ease-in-out var(--delay,0s) infinite;
  pointer-events:none;
  z-index:4;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}
@keyframes float-emoji {
  0%,100% { transform:translateY(0) rotate(0deg); opacity:0.9; }
  50%      { transform:translateY(-8px) rotate(3deg); opacity:1; }
}

/* ── SCENE INFO CARD ── */
.ct-info-card {
  position:absolute;
  top:20px; left:50%;
  transform:translateX(-50%);
  background:rgba(255,255,255,0.14);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,0.35);
  border-radius:20px;
  padding:12px 24px;
  text-align:center;
  z-index:8;
  box-shadow:0 8px 32px rgba(0,0,0,0.14);
  white-space:nowrap;
}
.ct-info-time {
  font-family:'Montserrat',sans-serif;
  font-weight:800; font-size:13px;
  color:#F4B400;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.ct-info-desc {
  font-family:'Inter',sans-serif;
  font-size:13px;
  color:rgba(255,255,255,0.92);
  margin-top:3px;
  font-weight:500;
}

/* ── TIMELINE NAV ── */
.ct-nav-bar {
  background:white;
  border-top:1px solid rgba(0,0,0,0.07);
  padding:20px 0 16px;
  position:relative;
}
.ct-nav-inner {
  max-width:900px;
  margin:0 auto;
  padding:0 28px;
  position:relative;
}
.ct-nav-track {
  position:absolute;
  top:12px; left:10%; right:10%;
  height:3px;
  background:rgba(0,0,0,0.07);
  border-radius:2px;
}
.ct-nav-progress {
  height:100%;
  background:linear-gradient(90deg,#00B894,#F4B400);
  border-radius:2px;
  transition:width 1.4s cubic-bezier(0.16,1,0.3,1);
  width:0%;
}
.ct-nav-stops {
  display:flex;
  justify-content:space-between;
}
.ct-nav-stop {
  display:flex; flex-direction:column;
  align-items:center; gap:6px;
  background:none; border:none;
  cursor:pointer; padding:0;
}
.ct-nav-stop:hover { transform:translateY(-2px); }
.ct-nav-dot {
  width:16px; height:16px;
  border-radius:50%;
  background:#ddd;
  border:3px solid rgba(0,0,0,0.1);
  transition:all 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.ct-nav-stop.active .ct-nav-dot {
  background:#00B894;
  border-color:#00B894;
  transform:scale(1.4);
  box-shadow:0 0 0 5px rgba(0,184,148,0.2);
}
.ct-nav-time {
  font-family:'Montserrat',sans-serif;
  font-weight:700; font-size:11.5px;
  color:#F4B400; line-height:1;
}
.ct-nav-lbl {
  font-family:'Inter',sans-serif;
  font-size:11px; color:#888;
  transition:color 0.3s;
}
.ct-nav-stop.active .ct-nav-lbl { color:#00B894; font-weight:600; }

/* Progress bar */
.ct-autobar {
  height:3px; background:rgba(0,0,0,0.06); overflow:hidden;
}
.ct-autobar-fill {
  height:100%;
  background:linear-gradient(90deg,#00B894,#F4B400);
  width:0%;
}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .ct-stage{height:360px}
  .ct-nav-lbl{display:none}
  .ct-home-wall{width:100px;height:120px}
  .ct-emoji{font-size:22px}
  .ct-info-card{padding:8px 16px}
  /* Rooftop on mobile: the 90px desktop slab puts its surface at 170px, too
     high for a 360px stage. Shrink the deck to 30px so its surface sits at
     110px, and move the character, laptop and plants ONTO that same surface
     (laptop = slabH-2, plant = slabH-1, char = 80+slabH) so nothing floats. */
  .ct-slide--3 .ct-rooftop-slab { height: 30px; }
  .ct-slide--3 .ct-rooftop-laptop { bottom: 28px; }
  .ct-slide--3 .ct-plant-dec--l,
  .ct-slide--3 .ct-plant-dec--r { bottom: 29px; }
  .ct-slide--3 .ct-character { bottom: 110px; }
}
@media(max-width:480px){
  .ct-stage{height:300px}
  /* Same treatment, even shorter deck (surface at 92px). */
  .ct-slide--3 .ct-rooftop-slab { height: 12px; }
  .ct-slide--3 .ct-rooftop-laptop { bottom: 10px; }
  .ct-slide--3 .ct-plant-dec--l,
  .ct-slide--3 .ct-plant-dec--r { bottom: 11px; }
  .ct-slide--3 .ct-character { bottom: 92px; }
}

/* ── ROOFTOP SCENE: character sits on slab surface (desktop) ──
   .ct-elements has bottom:80px offset; .ct-rooftop-slab is 90px tall
   → slab top = 80 + 90 = 170px above stage bottom.
   Character is outside .ct-elements so must be set explicitly. */
.ct-slide--3 .ct-character { bottom: 170px; }

/* ================================================================
   CINEMATIC ENHANCEMENTS — Playful & Bouncy
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ── 1. KEN BURNS — slow zoom while scene is active ── */
  .ct-slide.active {
    will-change: opacity, transform;
    animation: ct-ken-burns 4.5s ease-in-out forwards;
  }
  @keyframes ct-ken-burns {
    0%   { transform: scale(1.00) translate(0,     0); }
    50%  { transform: scale(1.03) translate(-0.7%, 0.4%); }
    100% { transform: scale(1.05) translate(0,     0); }
  }
  /* Rooftop scene: very subtle Ken Burns only — precise positioning
     means a full 5% scale visibly displaces the bottom-placed character */
  .ct-slide--3.active {
    animation: ct-ken-burns-subtle 4.5s ease-in-out forwards;
  }
  @keyframes ct-ken-burns-subtle {
    0%   { transform: scale(1.00); }
    100% { transform: scale(1.02); }
  }

  /* ── 2. STAGGERED ENTRANCE ── */
  /* Info card: opacity-only (has translateX(-50%) base — can't touch transform) */
  .ct-slide.active .ct-info-card {
    animation: ct-fade-up 0.5s ease 0.1s both;
  }
  @keyframes ct-fade-up {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  /* Character: bouncy pop (no base transform — safe) */
  .ct-slide.active .ct-character {
    animation: ct-bounce-up 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s both;
  }
  @keyframes ct-bounce-up {
    from { opacity: 0; transform: translateY(20px) scale(0.85); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
  }

  /* Scene prop stagger (home building, city bg — no base transforms) */
  .ct-slide.active .ct-home-bldg {
    animation: ct-fade-up 0.55s ease 0.06s both;
  }
  .ct-slide.active .ct-office-bldg-bg {
    animation: ct-fade-up 0.55s ease 0.06s both;
  }
  .ct-slide.active .ct-city-bg {
    animation: ct-fade-up 0.5s ease 0.04s both;
  }
  .ct-slide.active .ct-city-sil {
    animation: ct-fade-up 0.5s ease 0.04s both;
  }

  /* ── 3. STAR PARALLAX DRIFT (ambient CSS; JS adds mouse layer) ── */
  /* Using `translate` (individual CSS transform) so it stacks with
     JS-set `transform` for mouse parallax without conflict. */
  .ct-stars {
    transition: transform 0.35s ease-out;
    animation: ct-star-drift 9s ease-in-out infinite alternate;
  }
  @keyframes ct-star-drift {
    from { translate: 0px 0px; }
    to   { translate: 7px -5px; }
  }

}

/* ── 7. PREFERS-REDUCED-MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .ct-slide {
    transition: opacity 0.3s ease, visibility 0.3s !important;
  }
  .ct-slide.active { animation: none !important; }
  .ct-info-card, .ct-character,
  .ct-home-bldg, .ct-office-bldg-bg,
  .ct-city-bg, .ct-city-sil { animation: none !important; }
  .ct-stars { animation: none !important; transition: none !important; }
  .ct-star, .ct-cloud--a, .ct-cloud--b, .ct-emoji,
  .ct-wa-bubble, .ct-light-bulb, .ct-laptop-screen-inner {
    animation-duration: 0.01ms !important;
  }
}