// scenes.jsx — v2
// Premium cinematic hero: the PERSON and the EXPERIENCE are the subject.
// UI/Booking is reduced to elegant floating moments that support the story.

const C = {
  white: '#FFFFFF',
  off: '#F8F4EA',        // warm cream — shirt color & bright surfaces
  cream: '#FBF8EF',      // brightest paper
  paper: '#F4EEDE',      // card surface
  warm: '#E8E0CD',       // deeper warm cream
  black: '#050505',
  ink: '#1A1612',        // primary dark text on light
  inkSoft: '#3A3228',
  dark: '#171717',
  darker: '#0B0B0B',
  gold: '#D4AF37',
  goldDeep: '#A07E20',
  soft: '#F4E3A1',
  border: 'rgba(20,16,12,0.10)',
  text: 'rgba(26,22,18,0.88)',
  textDim: 'rgba(26,22,18,0.55)',
  textFaint: 'rgba(26,22,18,0.30)',
};

const FONT_SANS = "'Manrope', 'Helvetica Neue', system-ui, sans-serif";
const FONT_SERIF = "'Cormorant Garamond', 'Times New Roman', serif";
const FONT_MONO = "'JetBrains Mono', ui-monospace, monospace";

// ── Helpers ─────────────────────────────────────────────────────────────────

const lerp = (a, b, t) => a + (b - a) * t;
const fadeIn = (t, dur, ease = Easing.easeOutCubic) => ease(clamp(t / dur, 0, 1));
const win = (t, inStart, inDur, outStart, outDur, eIn = Easing.easeOutCubic, eOut = Easing.easeInCubic) => {
  if (t < inStart) return 0;
  if (t < inStart + inDur) return eIn((t - inStart) / inDur);
  if (t < outStart) return 1;
  if (t < outStart + outDur) return 1 - eOut((t - outStart) / outDur);
  return 0;
};

// ── Cinematic backdrop ──────────────────────────────────────────────────────
// Two-stage atmosphere: interior warmth (0-5s) → exterior depth (5s+)

function Backdrop() {
  const t = useTime();
  const exteriorMix = clamp((t - 4.5) / 2.5, 0, 1);
  const interiorMix = 1 - exteriorMix;
  const breathe = 0.5 + 0.5 * Math.sin(t * 0.5);

  return (
    <div style={{ position: 'absolute', inset: 0, overflow: 'hidden' }}>
      {/* Base — warm cream gradient */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 90% 80% at 50% 55%, #FCF8EE 0%, #F2ECDC 60%, #E4DCC7 100%)`,
      }} />

      {/* Interior: warm spotlight wash */}
      <div style={{
        position: 'absolute', inset: 0, opacity: interiorMix,
        background: `radial-gradient(ellipse 45% 70% at 38% 35%, rgba(212,175,55,${0.14 + 0.05 * breathe}), transparent 60%)`,
      }} />
      {/* Subtle architectural columns hint (warm dark hairlines) */}
      <div style={{
        position: 'absolute', inset: 0, opacity: interiorMix * 0.5,
        backgroundImage: `linear-gradient(90deg, transparent 0%, transparent 17%, rgba(40,30,15,0.06) 17.5%, transparent 18%, transparent 80%, rgba(40,30,15,0.05) 80.5%, transparent 81%)`,
      }} />

      {/* Exterior: warm horizon glow rising */}
      <div style={{
        position: 'absolute', inset: 0, opacity: exteriorMix,
        background: `
          radial-gradient(ellipse 80% 35% at 50% 100%, rgba(212,175,55,0.22), transparent 60%),
          radial-gradient(ellipse 55% 50% at 72% 50%, rgba(212,175,55,0.14), transparent 60%)
        `,
      }} />
    </div>
  );
}

// Subtle floor reflection line — present in both phases
function FloorLine({ t }) {
  const o = fadeIn(t - 0.3, 1.2);
  return (
    <div style={{
      position: 'absolute', left: 0, right: 0, top: 840,
      height: 1,
      background: 'linear-gradient(90deg, transparent 0%, rgba(212,175,55,0.35) 50%, transparent 100%)',
      opacity: o,
    }} />
  );
}

// Floor reflection blur of figure
function FloorReflection({ t, personX, walking }) {
  const o = fadeIn(t - 0.4, 1.0) * 0.5;
  return (
    <div style={{
      position: 'absolute',
      left: personX - 100, top: 745,
      width: 200, height: 90,
      background: `radial-gradient(ellipse 50% 60% at 50% 0%, rgba(0,0,0,0.7), transparent 70%)`,
      opacity: o,
      filter: 'blur(3px)',
      pointerEvents: 'none',
    }} />
  );
}

// ── Particles ────────────────────────────────────────────────────────────────

const PARTICLES = Array.from({ length: 32 }, (_, i) => {
  const r = (n) => {
    const x = Math.sin(i * 9301 + n * 49297) * 233280;
    return x - Math.floor(x);
  };
  return {
    x: r(1) * 1600,
    y: r(2) * 900,
    size: 1 + r(3) * 2.6,
    speed: 0.03 + r(4) * 0.08,
    drift: 18 + r(5) * 42,
    phase: r(6) * Math.PI * 2,
    opacity: 0.25 + r(7) * 0.55,
  };
});

function Particles() {
  const t = useTime();
  return (
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
      {PARTICLES.map((p, i) => {
        const y = ((p.y - t * p.speed * 80) % 900 + 900) % 900;
        const x = p.x + Math.sin(t * 0.5 + p.phase) * p.drift;
        const flicker = 0.6 + 0.4 * Math.sin(t * 1.1 + p.phase * 2);
        return (
          <div key={i} style={{
            position: 'absolute',
            left: x, top: y,
            width: p.size, height: p.size,
            borderRadius: '50%',
            background: C.gold,
            opacity: p.opacity * flicker * 0.55,
            boxShadow: `0 0 ${p.size * 4}px rgba(160,126,32,0.45)`,
            transform: 'translate(-50%,-50%)',
          }} />
        );
      })}
    </div>
  );
}

function Vignette() {
  return (
    <div style={{
      position: 'absolute', inset: 0, pointerEvents: 'none',
      background: 'radial-gradient(ellipse 80% 75% at 50% 50%, transparent 55%, rgba(60,45,18,0.18) 100%)',
    }} />
  );
}

function Grain() {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      pointerEvents: 'none', opacity: 0.06, mixBlendMode: 'overlay',
      backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")`,
    }} />
  );
}

// ── Person figure — elegant fashion-illustration silhouette ─────────────────
// SVG paths form a coherent silhouette. Subtle gold rim-light strokes.

function PersonFigure({ highlight = 0 }) {
  // highlight 0..1: gold rim glows brighter (used at door arrival)
  const rimW = 1.0 + 0.6 * highlight;
  const rim = `rgba(212,175,55,${0.45 + 0.45 * highlight})`;
  const rimSoft = `rgba(244,227,161,${0.22 + 0.3 * highlight})`;

  return (
    <svg viewBox="0 0 280 760" width="280" height="760" style={{
      filter: highlight > 0
        ? `drop-shadow(0 0 ${15 + 35 * highlight}px rgba(212,175,55,${0.3 * highlight})) drop-shadow(0 12px 30px rgba(0,0,0,0.7))`
        : 'drop-shadow(0 12px 30px rgba(0,0,0,0.7))',
      display: 'block',
    }}>
      <defs>
        <linearGradient id="coatGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#070605"/>
          <stop offset="0.5" stopColor="#100E0B"/>
          <stop offset="1" stopColor="#060504"/>
        </linearGradient>
        <linearGradient id="headGrad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#060504"/>
          <stop offset="0.6" stopColor="#120F0C"/>
          <stop offset="1" stopColor="#080706"/>
        </linearGradient>
      </defs>

      {/* Head — clean oval silhouette */}
      <path d="M 146 36
               C 120 34, 106 56, 108 88
               C 108 100, 110 114, 116 128
               C 122 144, 132 156, 146 158
               C 160 156, 170 144, 176 128
               C 182 114, 184 100, 184 88
               C 186 56, 172 34, 146 36 Z"
        fill="url(#headGrad)" stroke={rim} strokeWidth={rimW * 0.75} strokeLinejoin="round"/>
      {/* Hair sits on top — distinct darker shape with sweep */}
      <path d="M 113 88
               C 108 56, 124 32, 146 32
               C 172 32, 188 56, 184 92
               C 184 100, 178 102, 174 96
               C 172 86, 166 78, 158 76
               C 148 74, 136 76, 128 82
               C 122 88, 118 96, 116 100
               C 114 102, 113 96, 113 88 Z"
        fill="#050403" stroke={rim} strokeWidth={rimW * 0.7} strokeLinejoin="round"/>
      {/* Hair sweep gold rim — right side */}
      <path d="M 178 62 C 184 76, 184 96, 180 110"
        fill="none" stroke={rimSoft} strokeWidth="1.4" strokeLinecap="round"/>
      {/* Subtle jaw shadow */}
      <path d="M 122 132 Q 146 142 174 130" fill="none" stroke="rgba(0,0,0,0.4)" strokeWidth="3" opacity="0.5"/>

      {/* Neck */}
      <path d="M 132 152 L 130 178 L 162 178 L 160 152 Z"
        fill="#0A0907" stroke={rim} strokeWidth={rimW * 0.55}/>

      {/* Shirt — white triangle visible between lapels */}
      <path d="M 128 174 L 146 240 L 164 174 Z"
        fill="#FAFAFA" stroke="rgba(0,0,0,0.35)" strokeWidth="0.5" strokeLinejoin="round"/>
      {/* Shirt collar wings */}
      <path d="M 128 174 L 124 188 L 134 184 L 138 178 Z"
        fill="#FFFFFF" stroke="rgba(0,0,0,0.4)" strokeWidth="0.4"/>
      <path d="M 164 174 L 168 188 L 158 184 L 154 178 Z"
        fill="#FFFFFF" stroke="rgba(0,0,0,0.4)" strokeWidth="0.4"/>

      {/* Tie knot */}
      <path d="M 138 184 L 154 184 L 156 198 L 152 208 L 140 208 L 136 198 Z"
        fill="#070605" stroke={rim} strokeWidth={rimW * 0.4} strokeLinejoin="round"/>
      {/* Tie body — slim, reaches to mid-jacket */}
      <path d="M 138 208 L 154 208 L 156 224 L 156 400 L 152 420 L 146 426 L 140 420 L 136 400 L 136 224 Z"
        fill="#080706" stroke={rim} strokeWidth={rimW * 0.45} strokeLinejoin="round"/>
      {/* Tie subtle gold thread */}
      <line x1="146" y1="220" x2="146" y2="418" stroke="rgba(212,175,55,0.18)" strokeWidth="0.5"/>

      {/* Suit jacket — sharper shoulders, hem at hip */}
      <path d="M 72 192
               Q 90 176 132 174
               L 138 174
               L 146 240
               L 154 174
               L 160 174
               Q 202 176 220 192
               Q 232 208 234 234
               L 238 320
               Q 240 390 234 442
               Q 230 472 220 480
               L 178 480
               L 174 484
               L 118 484
               L 114 480
               L 72 480
               Q 62 472 58 442
               Q 52 390 54 320
               L 58 234
               Q 60 208 72 192 Z"
        fill="url(#coatGrad)" stroke={rim} strokeWidth={rimW * 0.95} strokeLinejoin="round"/>

      {/* Lapel sharp edges */}
      <path d="M 100 200 L 128 174 L 138 174 L 146 240 L 134 224 L 110 218 Z"
        fill="#050403" stroke={rim} strokeWidth={rimW * 0.7} strokeLinejoin="round"/>
      <path d="M 192 200 L 164 174 L 154 174 L 146 240 L 158 224 L 182 218 Z"
        fill="#050403" stroke={rim} strokeWidth={rimW * 0.7} strokeLinejoin="round"/>

      {/* Lapel pin — gold */}
      <circle cx="118" cy="208" r="2.4" fill={C.gold} opacity={0.78 + 0.22 * highlight}/>
      <circle cx="118" cy="208" r="4.5" fill="none" stroke={C.gold} strokeWidth="0.4" opacity={0.4}/>

      {/* Right-edge gold rim highlight on jacket */}
      <path d="M 220 192 Q 232 208 234 234 L 238 320 Q 240 390 234 442"
        fill="none" stroke={rimSoft} strokeWidth="1.5" strokeLinecap="round"/>

      {/* Interior shadow on jacket for volume */}
      <path d="M 78 210 Q 70 280 70 380 Q 72 440 80 478"
        fill="none" stroke="rgba(0,0,0,0.55)" strokeWidth="10" opacity="0.45"/>

      {/* Pocket square — soft gold peek */}
      <path d="M 86 286 L 106 282 L 102 296 L 90 298 Z"
        fill={C.gold} opacity={0.55 + 0.25 * highlight}/>
      <path d="M 90 282 L 100 280 L 96 290 L 92 290 Z"
        fill={C.soft} opacity={0.7 + 0.25 * highlight}/>

      {/* Suit buttons — small gold dots on right side */}
      <circle cx="160" cy="358" r="1.6" fill={C.gold} opacity={0.55 + 0.25 * highlight}/>
      <circle cx="160" cy="358" r="3" fill="none" stroke="rgba(212,175,55,0.3)" strokeWidth="0.4"/>
      <circle cx="160" cy="406" r="1.6" fill={C.gold} opacity={0.5 + 0.25 * highlight}/>
      <circle cx="160" cy="406" r="3" fill="none" stroke="rgba(212,175,55,0.3)" strokeWidth="0.4"/>

      {/* Jacket vent at bottom center */}
      <line x1="146" y1="450" x2="146" y2="484" stroke="rgba(212,175,55,0.18)" strokeWidth="0.6"/>

      {/* RIGHT arm (figure's right, screen-left): bent holding phone at chest */}
      <path d="M 86 196
               Q 64 220 50 260
               Q 38 305 44 345
               Q 50 360 76 358
               Q 92 332 96 296
               Q 104 250 116 220 Z"
        fill="#0A0907" stroke={rim} strokeWidth={rimW * 0.75} strokeLinejoin="round"/>
      {/* Right hand */}
      <ellipse cx="74" cy="358" rx="12" ry="11" fill="#0A0907" stroke={rim} strokeWidth={rimW * 0.55}/>

      {/* Phone held at chest — larger, more visible */}
      <g transform="translate(72 322) rotate(-15)">
        {/* Phone glow */}
        <rect x="-20" y="-3" width="40" height="58" rx="6" fill="rgba(244,227,161,0.08)" filter="blur(2px)"/>
        <rect x="-17" y="0" width="34" height="52" rx="4.5" fill="#0F0E0D" stroke={C.gold} strokeWidth="0.9" strokeOpacity={0.65 + 0.3 * highlight}/>
        <rect x="-15" y="3.5" width="30" height="45" rx="3" fill="#0A0907"/>
        {/* Screen content */}
        <rect x="-12" y="7" width="22" height="3" rx="1" fill={C.gold} fillOpacity="0.8"/>
        <rect x="-12" y="14" width="16" height="2" rx="0.8" fill={C.soft} fillOpacity="0.5"/>
        <rect x="-12" y="20" width="22" height="1.4" fill={C.soft} fillOpacity="0.28"/>
        <rect x="-12" y="25" width="18" height="1.4" fill={C.soft} fillOpacity="0.25"/>
        <rect x="-12" y="30" width="14" height="1.4" fill={C.soft} fillOpacity="0.22"/>
        {/* Gold check accent on screen */}
        <circle cx="8" cy="40" r="3" fill={C.gold} opacity="0.8"/>
        {/* Screen bloom */}
        <rect x="-15" y="3.5" width="30" height="45" rx="3" fill="rgba(244,227,161,0.1)"/>
        {/* Glint */}
        <ellipse cx="-8" cy="8" rx="3" ry="1" fill="rgba(255,255,255,0.3)"/>
      </g>

      {/* LEFT arm (figure's left, screen-right): relaxed at side, hand peeks past jacket hem */}
      <path d="M 210 196
               Q 230 218 238 262
               Q 244 320 240 410
               Q 238 460 232 490
               L 218 492
               Q 214 460 212 410
               Q 208 320 204 254 Z"
        fill="#0A0907" stroke={rim} strokeWidth={rimW * 0.75} strokeLinejoin="round"/>
      {/* Left hand */}
      <ellipse cx="226" cy="500" rx="11" ry="13" fill="#0A0907" stroke={rim} strokeWidth={rimW * 0.55}/>

      {/* Trousers below jacket — visible from hem to ankle, with crease */}
      <path d="M 90 484 L 104 712 L 138 712 L 144 484 Z"
        fill="#070605" stroke={rim} strokeWidth={rimW * 0.6}/>
      <path d="M 154 484 L 158 712 L 192 712 L 206 484 Z"
        fill="#070605" stroke={rim} strokeWidth={rimW * 0.6}/>
      {/* Crease lines */}
      <line x1="118" y1="492" x2="123" y2="708" stroke="rgba(244,227,161,0.10)" strokeWidth="0.7"/>
      <line x1="176" y1="492" x2="171" y2="708" stroke="rgba(244,227,161,0.10)" strokeWidth="0.7"/>

      {/* Shoes — sleek pointed */}
      <path d="M 96 712 Q 82 728 100 732 L 140 730 Q 146 726 140 716 L 104 712 Z"
        fill="#040403" stroke={rim} strokeWidth={rimW * 0.6}/>
      <path d="M 156 716 L 200 712 Q 208 716 206 728 Q 202 736 192 736 L 162 734 Q 156 730 156 716 Z"
        fill="#040403" stroke={rim} strokeWidth={rimW * 0.6}/>

      {/* Subtle gold ground glint near shoes when highlighted */}
      {highlight > 0 && (
        <ellipse cx="148" cy="740" rx="80" ry="6" fill={C.gold} opacity={0.15 * highlight}/>
      )}
    </svg>
  );
}

// ── Person container: positions + animates the figure ───────────────────────

function Person({ t }) {
  // Position keyframes:
  //   0–4: standing center (x=560, body center)
  //   4–8.5: gentle walk to right (x=560 → x=1100)
  //   8.5–10: hold near door (x=1100)
  //   10–12: fade slightly behind the door glow
  const px = interpolate(
    [0, 4.2, 8.4, 10.4, 12],
    [560, 560, 1100, 1100, 1100],
    Easing.easeInOutCubic
  )(t);

  // Vertical bob while walking
  const walkPhase = clamp((t - 4.2) / 4.2, 0, 1);
  const isWalking = t > 4.2 && t < 8.5;
  const bob = isWalking ? Math.sin((t - 4.2) * 4.5) * 4 : 0;

  // Subtle stride sway (tilt left/right)
  const sway = isWalking ? Math.sin((t - 4.2) * 4.5) * 1.5 : 0;

  // Scene-1: figure scale slightly smaller in interior, grows as approaching door
  const scale = interpolate(
    [0, 4.2, 8.0, 10.2, 12],
    [1.0, 1.0, 1.06, 1.0, 0.96],
    Easing.easeInOutCubic
  )(t);

  // Door arrival: gold rim highlight intensifies
  const highlight = clamp((t - 8.0) / 1.6, 0, 1) * clamp(1 - (t - 10.5) / 1.2, 0, 1);

  // Fade in
  const reveal = fadeIn(t - 0.2, 1.0);

  // Fade out at very end (subtle, walks "into" the gold)
  const fadeAtEnd = 1 - clamp((t - 10.8) / 0.8, 0, 1) * 0.55;

  // Figure dimensions (rendered)
  const figW = 280 * scale;
  const figH = 760 * scale;

  return (
    <>
      {/* Floor shadow */}
      <div style={{
        position: 'absolute',
        left: px - 90, top: 855,
        width: 180, height: 28,
        background: 'radial-gradient(ellipse 50% 50% at 50% 0%, rgba(0,0,0,0.75), transparent 70%)',
        opacity: reveal * 0.85,
        filter: 'blur(4px)',
      }} />
      <div style={{
        position: 'absolute',
        left: px - figW / 2,
        top: 130 + bob,
        width: figW, height: figH,
        opacity: reveal * fadeAtEnd,
        transform: `rotate(${sway}deg)`,
        transformOrigin: '50% 95%',
        zIndex: 5,
      }}>
        <PersonFigure highlight={highlight}/>
      </div>
    </>
  );
}

// ── Spotlight pool that follows the person ─────────────────────────────────

function Spotlight({ t }) {
  // Follows person from center to door
  const px = interpolate(
    [0, 4.2, 8.4, 12],
    [560, 560, 1100, 1100],
    Easing.easeInOutCubic
  )(t);
  const reveal = fadeIn(t - 0.4, 1.2);

  // Brighter near door
  const intensity = interpolate(
    [0, 4, 7, 9, 12],
    [0.55, 0.6, 0.7, 1.0, 0.9],
    Easing.easeInOutCubic
  )(t);

  return (
    <div style={{
      position: 'absolute',
      left: px, top: 860,
      width: 540, height: 130,
      transform: 'translate(-50%, -50%)',
      background: `radial-gradient(ellipse 50% 50% at 50% 50%, rgba(212,175,55,${0.32 * intensity}), rgba(212,175,55,${0.10 * intensity}) 40%, transparent 70%)`,
      filter: 'blur(3px)',
      opacity: reveal,
      pointerEvents: 'none',
    }} />
  );
}

// ── Restaurant facade — emerges in background as person walks right ────────

function RestaurantFacade({ t }) {
  // Visible 5.0 onwards
  const reveal = fadeIn(t - 5.0, 2.0, Easing.easeOutCubic);
  if (reveal <= 0.01) return null;

  // Facade is to the right of frame, recedes in distance
  const baseX = 1180;
  const baseY = 220;
  const w = 520;
  const h = 520;

  // Door glow intensifies as person nears
  const doorGlow = clamp((t - 7.5) / 2.0, 0, 1);

  // Camera parallax: facade slides slightly left as person walks right
  const parallaxX = interpolate(
    [5.0, 10.5, 12],
    [60, 0, -20],
    Easing.easeInOutCubic
  )(t);

  const cols = 5;
  const colW = 70;
  const colGap = (w - cols * colW) / (cols + 1);

  const rows = [
    { y: baseY + 30, h: 100 },
    { y: baseY + 170, h: 100 },
  ];

  return (
    <div style={{
      position: 'absolute',
      left: baseX + parallaxX - w / 2, top: baseY,
      width: w, height: h,
      opacity: reveal,
      zIndex: 1,
    }}>
      {/* Facade mass — warm stone */}
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, #E8DFC8 0%, #D8CDB1 60%, #C8BD9F 100%)`,
        borderTop: '1px solid rgba(60,45,18,0.3)',
        boxShadow: 'inset 0 -30px 50px rgba(120,90,30,0.10), inset 0 20px 40px rgba(255,250,235,0.4)',
      }}/>

      {/* Cornice line — darker warm */}
      <div style={{
        position: 'absolute', left: -20, top: -6,
        width: w + 40, height: 6,
        background: 'linear-gradient(180deg, #6A4F1E, #3A2A0E)',
        borderBottom: '1px solid rgba(212,175,55,0.4)',
      }}/>

      {/* Windows — lit warm gold rectangles against stone */}
      {rows.map((row, ri) =>
        Array.from({ length: cols }).map((_, i) => {
          const wx = colGap + i * (colW + colGap);
          const wt = fadeIn(t - 5.2 - ri * 0.15 - i * 0.08, 0.7);
          const flicker = 0.85 + 0.15 * Math.sin(t * 1.3 + i * 7 + ri * 3);
          return (
            <div key={`${ri}-${i}`} style={{
              position: 'absolute',
              left: wx, top: row.y - baseY,
              width: colW, height: row.h,
              background: `linear-gradient(180deg, rgba(255,225,140,${0.55 * flicker}) 0%, rgba(220,170,60,${0.40 * flicker}) 60%, rgba(180,135,40,${0.25 * flicker}) 100%)`,
              borderTop: `1px solid rgba(160,120,40,${0.55 * flicker})`,
              borderBottom: `1px solid rgba(120,90,30,${0.35 * flicker})`,
              boxShadow: `0 0 ${22 * flicker}px rgba(212,175,55,${0.30 * flicker}), inset 0 0 12px rgba(255,235,170,${0.3 * flicker})`,
              opacity: wt,
            }}/>
          );
        })
      )}

      {/* Door — large arched centerpiece, deep warm interior glowing through */}
      <div style={{
        position: 'absolute',
        left: w / 2 - 50, top: 320,
        width: 100, height: 190,
        background: `linear-gradient(180deg, rgba(220,170,60,${0.65 + 0.25 * doorGlow}), rgba(180,135,40,${0.40 + 0.20 * doorGlow}))`,
        borderTop: `1.5px solid rgba(120,90,30,${0.75 + 0.25 * doorGlow})`,
        borderLeft: `1px solid rgba(80,60,20,${0.55})`,
        borderRight: `1px solid rgba(80,60,20,${0.55})`,
        borderTopLeftRadius: 70, borderTopRightRadius: 70,
        boxShadow: `0 0 ${40 + 70 * doorGlow}px rgba(212,175,55,${0.35 + 0.4 * doorGlow}), inset 0 20px 40px rgba(80,55,15,0.5), inset 0 -10px 30px rgba(255,235,170,0.3)`,
      }}>
        {/* Door split */}
        <div style={{
          position: 'absolute',
          left: '50%', top: 18, bottom: 8,
          width: 1,
          background: `rgba(60,45,18,${0.5 + 0.3 * doorGlow})`,
        }}/>
      </div>

      {/* Signage above door */}
      <div style={{
        position: 'absolute',
        left: '50%', top: 270,
        transform: 'translateX(-50%)',
        textAlign: 'center',
      }}>
        <div style={{
          fontFamily: FONT_SERIF, fontStyle: 'italic',
          fontSize: 24, letterSpacing: '0.02em',
          color: C.goldDeep,
          textShadow: `0 0 12px rgba(212,175,55,${0.4 + 0.25 * doorGlow})`,
        }}>Lumera</div>
        <div style={{
          marginTop: 2,
          fontFamily: FONT_MONO, fontSize: 7,
          letterSpacing: '0.4em', textTransform: 'uppercase',
          color: 'rgba(60,45,18,0.6)',
        }}>Buchung · Mandanten</div>
      </div>

      {/* Pool of gold light at door base, spilling onto ground */}
      <div style={{
        position: 'absolute',
        left: '50%', top: 510,
        width: 320, height: 90,
        transform: 'translateX(-50%)',
        background: `radial-gradient(ellipse 50% 60% at 50% 0%, rgba(212,175,55,${0.35 + 0.25 * doorGlow}), rgba(212,175,55,${0.1 + 0.1 * doorGlow}) 40%, transparent 70%)`,
        filter: 'blur(4px)',
        pointerEvents: 'none',
      }}/>
    </div>
  );
}

// ── Distant interior architecture (visible 0-5s, then dissolves) ───────────

function InteriorArchitecture({ t }) {
  const reveal = win(t, 0.5, 1.0, 4.5, 1.5);
  if (reveal <= 0.01) return null;

  return (
    <div style={{ position: 'absolute', inset: 0, opacity: reveal, zIndex: 1 }}>
      {/* Tall vertical sconce lights / architectural columns */}
      <div style={{
        position: 'absolute',
        left: 200, top: 120,
        width: 2, height: 600,
        background: 'linear-gradient(180deg, transparent 0%, rgba(60,45,18,0.18) 30%, rgba(60,45,18,0.22) 60%, transparent 100%)',
        boxShadow: '0 0 24px rgba(212,175,55,0.18)',
      }}/>
      <div style={{
        position: 'absolute',
        left: 1400, top: 120,
        width: 2, height: 600,
        background: 'linear-gradient(180deg, transparent 0%, rgba(60,45,18,0.18) 30%, rgba(60,45,18,0.22) 60%, transparent 100%)',
        boxShadow: '0 0 24px rgba(212,175,55,0.18)',
      }}/>
      {/* Subtle wall panels */}
      <div style={{
        position: 'absolute',
        left: 90, top: 200, width: 140, height: 400,
        border: '1px solid rgba(20,16,12,0.06)',
      }}/>
      <div style={{
        position: 'absolute',
        left: 1370, top: 200, width: 140, height: 400,
        border: '1px solid rgba(20,16,12,0.06)',
      }}/>
    </div>
  );
}

// ── Floating UI moments — minimal, support the person ──────────────────────
// 1. Category pill (1.5-3.5): "Restaurant" highlighted gold
// 2. Confirmation card (3.0-4.8): "19:30 · Di 19. Mai"
// Both appear NEAR the person, like notifications

function FloatingMoments({ t }) {
  // Person center x stays at 560 during scene 1, so floating UI appears to right of them.
  return (
    <>
      <CategoryHint t={t} />
      <ConfirmationCard t={t} />
    </>
  );
}

function CategoryHint({ t }) {
  // visible 1.4 - 3.4
  const o = win(t, 1.3, 0.55, 3.2, 0.5);
  if (o <= 0) return null;

  // Stagger of 3 chips, with "Restaurant" highlighted
  const items = [
    { label: 'Restaurant', delay: 1.4, selected: true },
    { label: 'Arzttermin', delay: 1.55, selected: false },
    { label: 'Beratung',   delay: 1.70, selected: false },
  ];

  return (
    <div style={{
      position: 'absolute',
      left: 820, top: 300,
      opacity: o,
      zIndex: 8,
    }}>
      <div style={{
        fontFamily: FONT_MONO, fontSize: 11,
        letterSpacing: '0.3em', textTransform: 'uppercase',
        color: C.goldDeep, marginBottom: 18,
      }}>
        — Schritt 01 · Kategorie
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map((it, i) => {
          const localT = t - it.delay;
          const enterT = fadeIn(localT, 0.5, Easing.easeOutBack);
          const x = (1 - enterT) * -30;
          const selGlow = it.selected ? clamp((t - 2.2) / 0.5, 0, 1) : 0;
          const tapPhase = it.selected ? t - 2.7 : -1;
          const tapPulse = tapPhase >= 0 && tapPhase < 0.7 ? 1 - tapPhase / 0.7 : 0;
          return (
            <div key={it.label} style={{
              padding: '12px 22px',
              borderRadius: 999,
              fontFamily: FONT_SANS, fontSize: 15, fontWeight: 500, letterSpacing: '0.04em',
              color: selGlow > 0 ? C.ink : C.inkSoft,
              background: selGlow > 0
                ? `linear-gradient(135deg, rgba(212,175,55,${0.40 + 0.25 * selGlow}), rgba(244,227,161,${0.30 + 0.20 * selGlow}))`
                : 'rgba(255,253,247,0.7)',
              border: `1px solid ${selGlow > 0 ? `rgba(212,175,55,${0.55 + 0.35 * selGlow})` : 'rgba(20,16,12,0.10)'}`,
              boxShadow: selGlow > 0
                ? `0 6px 24px rgba(160,126,32,${0.18 * selGlow + 0.25 * tapPulse}), 0 0 ${10 + 22 * selGlow}px rgba(212,175,55,${0.25 * selGlow + 0.35 * tapPulse})`
                : '0 4px 12px rgba(60,45,18,0.06)',
              backdropFilter: 'blur(8px)',
              opacity: enterT,
              transform: `translateX(${x}px) scale(${1 + 0.04 * tapPulse})`,
              alignSelf: 'flex-start',
              display: 'flex', alignItems: 'center', gap: 12,
              minWidth: 240,
            }}>
              <div style={{
                width: 6, height: 6, borderRadius: '50%',
                background: selGlow > 0 ? C.goldDeep : 'rgba(20,16,12,0.25)',
                boxShadow: selGlow > 0 ? `0 0 8px rgba(212,175,55,0.7)` : 'none',
              }}/>
              <span>{it.label}</span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ConfirmationCard({ t }) {
  // appears 3.4 - 5.6, drifts away as person starts walking
  const o = win(t, 3.4, 0.6, 5.2, 0.7);
  if (o <= 0) return null;

  const enterT = fadeIn(t - 3.4, 0.7, Easing.easeOutCubic);
  const y = (1 - enterT) * 24;

  // Slot pulse highlight
  const pulsePhase = t - 4.2;
  const pulse = pulsePhase > 0 && pulsePhase < 0.7 ? 1 - pulsePhase / 0.7 : 0;

  return (
    <div style={{
      position: 'absolute',
      left: 820, top: 280,
      opacity: o,
      transform: `translateY(${y}px)`,
      zIndex: 8,
      width: 420,
    }}>
      <div style={{
        fontFamily: FONT_MONO, fontSize: 11,
        letterSpacing: '0.3em', textTransform: 'uppercase',
        color: C.goldDeep, marginBottom: 16,
      }}>
        — Schritt 02 · Termin wählen
      </div>

      <div style={{
        padding: '24px 26px',
        borderRadius: 16,
        background: 'linear-gradient(180deg, rgba(255,253,247,0.92) 0%, rgba(245,239,224,0.92) 100%)',
        border: `1px solid rgba(212,175,55,${0.4 + 0.3 * pulse})`,
        backdropFilter: 'blur(12px)',
        boxShadow: `0 24px 60px rgba(60,45,18,0.18), 0 0 ${30 + 40 * pulse}px rgba(212,175,55,${0.2 + 0.3 * pulse})`,
      }}>
        <div style={{
          fontFamily: FONT_SERIF, fontStyle: 'italic',
          fontSize: 22, color: C.ink, letterSpacing: '-0.01em',
        }}>Lumière, Restaurant</div>

        <div style={{
          marginTop: 18,
          display: 'flex', alignItems: 'baseline', gap: 32,
        }}>
          <div style={{
            fontFamily: FONT_SERIF, fontWeight: 500,
            fontSize: 60, color: C.goldDeep,
            letterSpacing: '-0.02em',
            lineHeight: 1,
            textShadow: `0 0 ${10 + 20 * pulse}px rgba(212,175,55,${0.35 + 0.3 * pulse})`,
          }}>19:30</div>
          <div style={{
            fontFamily: FONT_SANS, fontSize: 12,
            color: C.textDim, letterSpacing: '0.14em',
            textTransform: 'uppercase',
            lineHeight: 1.5,
          }}>
            Dienstag<br/>
            19. Mai
          </div>
        </div>

        {/* Mini time strip */}
        <div style={{
          marginTop: 22, display: 'flex', gap: 6,
        }}>
          {['18:30','19:00','19:30','20:00','20:30'].map(slot => {
            const sel = slot === '19:30';
            return (
              <div key={slot} style={{
                flex: 1, padding: '6px 0',
                textAlign: 'center',
                borderRadius: 6,
                fontFamily: FONT_MONO, fontSize: 10,
                letterSpacing: '0.04em',
                color: sel ? C.ink : C.textDim,
                background: sel
                  ? `linear-gradient(135deg, ${C.gold}, ${C.soft})`
                  : 'rgba(20,16,12,0.04)',
                border: `1px solid ${sel ? C.gold : 'rgba(20,16,12,0.08)'}`,
              }}>{slot}</div>
            );
          })}
        </div>

        <div style={{
          marginTop: 18,
          fontFamily: FONT_MONO, fontSize: 10,
          color: C.textFaint, letterSpacing: '0.18em', textTransform: 'uppercase',
        }}>
          — 2 Personen · Fensterplatz
        </div>
      </div>
    </div>
  );
}

// ── Final checkmark + "Termin bestätigt" overlay ───────────────────────────

function FinalConfirmation({ t }) {
  // Appears 10.0 onward
  if (t < 9.7) return null;
  const localT = t - 9.7;

  const cardIn = fadeIn(localT, 0.6, Easing.easeOutCubic);
  const cardY = (1 - cardIn) * 24;
  const ringScale = lerp(0.6, 1, Easing.easeOutBack(clamp(localT / 0.7, 0, 1)));
  const checkProgress = clamp((localT - 0.4) / 0.45, 0, 1);
  const textIn = fadeIn(localT - 0.7, 0.5);
  const textY = (1 - textIn) * 10;

  const ring1 = clamp((localT - 0.55) / 1.8, 0, 1);
  const ring2 = clamp((localT - 1.2) / 1.8, 0, 1);

  return (
    <div style={{
      position: 'absolute',
      left: '50%', top: 280,
      transform: `translateX(-50%) translateY(${cardY}px)`,
      opacity: cardIn,
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      zIndex: 12,
    }}>
      {[ring1, ring2].map((r, i) => r > 0 && (
        <div key={i} style={{
          position: 'absolute',
          left: '50%', top: 60,
          width: 120, height: 120,
          marginLeft: -60, marginTop: -60,
          borderRadius: '50%',
          border: `1px solid rgba(160,126,32,${0.65 * (1 - r)})`,
          transform: `scale(${0.6 + r * 2.4})`,
          pointerEvents: 'none',
        }}/>
      ))}

      <div style={{
        width: 110, height: 110,
        borderRadius: '50%',
        background: `radial-gradient(circle, rgba(212,175,55,0.28) 0%, rgba(212,175,55,0.10) 60%, transparent 80%)`,
        border: `1.5px solid rgba(160,126,32,0.85)`,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        boxShadow: `0 8px 40px rgba(160,126,32,0.30), inset 0 0 30px rgba(212,175,55,0.20)`,
        transform: `scale(${ringScale})`,
      }}>
        <svg width="60" height="60" viewBox="0 0 64 64" fill="none">
          <path d="M14 33 L 27 46 L 50 21"
            stroke={C.goldDeep} strokeWidth="2.8" strokeLinecap="round" strokeLinejoin="round"
            strokeDasharray={`${60 * checkProgress} 60`}/>
        </svg>
      </div>

      <div style={{
        marginTop: 26, textAlign: 'center',
        opacity: textIn, transform: `translateY(${textY}px)`,
      }}>
        <div style={{
          fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.34em',
          color: C.goldDeep, textTransform: 'uppercase',
        }}>Reservierung</div>
        <div style={{
          marginTop: 10,
          fontFamily: FONT_SERIF, fontStyle: 'italic',
          fontSize: 56, color: C.ink, letterSpacing: '-0.015em',
          textShadow: `0 0 30px rgba(255,250,235,0.6)`,
          lineHeight: 1,
        }}>
          Termin <span style={{ color: C.goldDeep, fontStyle: 'normal', fontFamily: FONT_SANS, fontWeight: 400 }}>bestätigt</span>
        </div>
        <div style={{
          marginTop: 10,
          fontFamily: FONT_SANS, fontSize: 14, color: C.textDim, letterSpacing: '0.08em',
        }}>
          Lumière · Di 19. Mai · 19:30 · 2 Personen
        </div>
      </div>
    </div>
  );
}

// ── Root composition ──────────────────────────────────────────────────────

function HeroAnimation() {
  const t = useTime();
  return (
    <>
      <Backdrop />
      <InteriorArchitecture t={t} />
      <RestaurantFacade t={t} />
      <FloorLine t={t} />
      <Particles />
      <Spotlight t={t} />
      <Person t={t} />
      <FloatingMoments t={t} />
      <FinalConfirmation t={t} />
      <Vignette />
      <Grain />
    </>
  );
}

Object.assign(window, { HeroAnimation, C });
