/* =====================================================================
   Scene: AI visual production — a client's brief and the delivered reel.
   Stage coordinates (695×400; compact 520). See Scenes/AI_Showreel.php.
   ===================================================================== */

.szs--ai .szs-ai__badge{position:absolute;left:96px;top:30px;z-index:4;width:62px;height:62px;border-radius:18px;font-size:26px;rotate:-10deg;box-shadow:0 14px 30px -10px rgba(255,107,44,.6)}

.szs--ai .szs-ai__sheet{position:absolute;left:128px;top:42px;width:436px;padding:12px;border-radius:24px;background:#fff;rotate:-3deg;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}

/* the brief: who asked, and what */
.szs--ai .szs-ai__brief{display:grid;height:60px;padding:8px 10px 8px 36px;border-radius:14px;background:var(--sz-fill);overflow:hidden}
.szs--ai .szs-ai__brief > div{grid-area:1/1;display:flex;gap:10px;align-items:flex-start;transition:transform .5s var(--sz-ease),opacity .4s}
.szs--ai .szs-ai__av{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#22395A;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#fff}
.szs--ai .szs-ai__bt{display:grid;gap:1px;min-width:0}
.szs--ai .szs-ai__who{font-size:11px;line-height:1.3;color:var(--sz-t3)}
.szs--ai .szs-ai__who b{font-weight:600;color:var(--sz-ink)}
.szs--ai .szs-ai__q{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.4;color:#2A2F37}

/* the reel window */
.szs--ai .szs-ai__win{--szs-af:var(--sz-orange);position:relative;width:412px;height:204px;margin-top:8px;border-radius:14px;overflow:hidden;background:#070D16}
.szs--ai .szs-ai__strip{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.szs--ai .szs-ai__item{position:absolute;top:0;height:204px;border-radius:12px;overflow:hidden;background:#0B1420;filter:blur(4px) brightness(.58) saturate(.75);transition:opacity .5s,filter .6s}
.szs--ai .szs-ai__item.is-focus{filter:none}
.szs--ai .szs-ai__media{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
/* number and shape, read on the whole reel */
.szs--ai .szs-ai__item::after{content:attr(data-n);position:absolute;left:10px;top:8px;z-index:2;font:700 26px/1 var(--sz-font);color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5);opacity:0;transition:opacity .35s}
.szs--ai .szs-ai__item::before{content:attr(data-ar);position:absolute;right:10px;top:12px;z-index:2;padding:3px 8px;border-radius:6px;background:rgba(7,13,22,.55);font:600 15px/1.2 var(--sz-font);color:#fff;opacity:0;transition:opacity .35s}
.szs--ai.is-out .szs-ai__item{filter:none;opacity:.4}
.szs--ai.is-out .szs-ai__item.is-target,.szs--ai.is-intro .szs-ai__item{opacity:1}
.szs--ai.is-out .szs-ai__item::after,.szs--ai.is-out .szs-ai__item::before{opacity:1}
.szs--ai.is-intro .szs-ai__item::after{font-size:96px;left:16px;top:14px}
.szs--ai.is-intro .szs-ai__item::before{top:auto;right:12px;bottom:14px;padding:6px 14px;border-radius:14px;font-size:56px}

/* focus pull: soft, sharp, hunts once, locks */
.szs--ai .szs-ai__item.is-pull > *{animation:szs-ai-pull 1.15s cubic-bezier(.3,.6,.3,1) both}
@keyframes szs-ai-pull{0%{filter:blur(10px) brightness(.85);transform:scale(1.07)}48%{filter:blur(0) brightness(1.05);transform:scale(1)}62%{filter:blur(2.4px)}78%{filter:blur(0) brightness(1)}100%{filter:none;transform:none}}

/* autofocus brackets */
.szs--ai .szs-ai__af{position:absolute;top:20%;height:60%;color:#fff;opacity:0;pointer-events:none}
.szs--ai .szs-ai__af i{position:absolute;width:16px;height:16px;border:2px solid currentColor}
.szs--ai .szs-ai__af i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:4px}
.szs--ai .szs-ai__af i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:4px}
.szs--ai .szs-ai__af i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:4px}
.szs--ai .szs-ai__af i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:4px}
.szs--ai .szs-ai__af.is-hunt{animation:szs-ai-af 1.6s cubic-bezier(.3,.7,.3,1) forwards}
@keyframes szs-ai-af{0%{opacity:0;transform:scale(1.75);color:#fff}20%{opacity:1;transform:scale(.88)}34%{transform:scale(1.06)}46%{transform:scale(1);color:#fff}50%{color:var(--szs-af)}56%{color:transparent}62%{color:var(--szs-af)}86%{opacity:1}100%{opacity:0;transform:scale(1);color:var(--szs-af)}}

/* what is playing, and for how long */
.szs--ai .szs-ai__hud{position:absolute;left:10px;right:10px;top:9px;display:flex;justify-content:space-between;font-size:10.5px;font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.92);transition:opacity .3s}
.szs--ai .szs-ai__hud span{padding:3px 7px;border-radius:6px;background:rgba(7,13,22,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.szs--ai .szs-ai__cap{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.12);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:#fff;opacity:0;transition:opacity .35s}
.szs--ai.is-out .szs-ai__cap{opacity:1}
.szs--ai .szs-ai__prog{position:absolute;left:12px;right:12px;bottom:10px;height:3px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;transition:opacity .3s}
.szs--ai .szs-ai__prog i{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.szs--ai.is-out .szs-ai__hud,.szs--ai.is-out .szs-ai__prog{opacity:0}

/* the result */
.szs--ai .szs-ai__ok{position:absolute;right:48px;top:308px;z-index:3;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 8px;border-radius:99px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-size:13px;font-weight:600;color:#fff;rotate:6deg}
.szs--ai .szs-ai__ok[hidden]{display:none}
.szs--ai .szs-ai__ok > i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sz-orange)}
.szs--ai .szs-ai__ok > i::before{content:"";width:8px;height:4px;margin-top:-3px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg)}
.szs--ai .szs-ai__ok > span{display:grid;height:20px;overflow:hidden}
.szs--ai .szs-ai__ok em{grid-area:1/1;line-height:20px;white-space:nowrap;transition:transform .45s var(--sz-ease),opacity .35s}

/* text that changes: the old line leaves before the new one arrives */
.szs--ai .b-in{transform:translateY(100%);opacity:0}
.szs--ai .b-out{transform:translateY(-100%);opacity:0}

/* compact stage (narrow panels) */
@container szs (max-width:560px){
  .szs--ai .szs-ai__badge{left:16px;top:26px}
  .szs--ai .szs-ai__sheet{left:42px}
  .szs--ai .szs-ai__ok{right:16px;top:312px}
}

/* =====================================================================
   Placeholder footage, for pieces without a video or image yet
   ===================================================================== */
.szs--ai .szs-ph__fx{position:absolute;inset:0;display:block;overflow:hidden}
.szs--ai .szs-ph__fx i,.szs--ai .szs-ph__fx b{position:absolute;display:block}
@keyframes szs-breathe{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.12)}}
@keyframes szs-twinkle{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes szs-spin{to{transform:rotate(360deg)}}

.szs-ph--perfume .szs-ph__fx{background:radial-gradient(70% 100% at 62% 100%,#3d2a1f 0%,#140e0b 72%)}
.szs-ph--perfume .pf-glow{left:calc(62% - 90px);top:8px;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,120,50,.55),transparent);animation:szs-breathe 4.5s ease-in-out infinite}
.szs-ph--perfume .pf-stone{left:14%;right:6%;bottom:-46px;height:96px;border-radius:50%;background:radial-gradient(60% 50% at 55% 25%,#4c525b,#1b1e23 72%);box-shadow:inset 0 7px 12px rgba(255,160,100,.28)}
.szs-ph--perfume .pf-cap{left:calc(62% - 13px);bottom:122px;width:26px;height:20px;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#2b2320,#6b5548 45%,#231c19)}
.szs-ph--perfume .pf-bottle{left:calc(62% - 32px);bottom:36px;width:64px;height:88px;overflow:hidden;border-radius:12px 12px 10px 10px;background:linear-gradient(90deg,rgba(255,190,140,.3),rgba(255,140,60,.6) 38%,rgba(110,45,18,.72) 72%,rgba(255,200,150,.4));box-shadow:inset 0 0 0 1px rgba(255,220,190,.4)}
.szs-ph--perfume .pf-rim{left:0;top:-20%;bottom:-20%;width:22px;background:linear-gradient(90deg,transparent,rgba(255,244,228,.9),transparent);transform:translateX(-40px) skewX(-14deg);animation:szs-pf-rim 3.4s ease-in-out infinite}
@keyframes szs-pf-rim{0%{transform:translateX(-40px) skewX(-14deg)}55%,100%{transform:translateX(90px) skewX(-14deg)}}
.szs-ph--perfume .pf-drop{width:4px;height:6px;border-radius:50%;background:rgba(255,230,210,.7);animation:szs-twinkle 2.6s ease-in-out infinite}

.szs-ph--coffee .szs-ph__fx{background:radial-gradient(80% 110% at 28% 0%,#e9b98c,#8a4f2c 58%,#3a2014)}
.szs-ph--coffee .cf-saucer{left:calc(50% - 72px);bottom:26px;width:144px;height:20px;border-radius:50%;background:linear-gradient(#f4ebe1,#cfc0b0)}
.szs-ph--coffee .cf-cup{left:calc(50% - 40px);bottom:36px;width:80px;height:58px;border-radius:6px 6px 36px 36px;background:linear-gradient(90deg,#d6c6b6,#f7f0e8 38%,#cbb9a5)}
.szs-ph--coffee .cf-handle{left:calc(50% + 32px);bottom:56px;width:26px;height:26px;border:6px solid #e6dacd;border-radius:50%}
.szs-ph--coffee .cf-steam{left:calc(50% - 7px);bottom:92px;width:14px;height:72px;border-radius:50%;background:rgba(255,255,255,.6);filter:blur(7px);opacity:0;animation:szs-cf-steam 3.8s ease-in infinite}
@keyframes szs-cf-steam{0%{opacity:0;transform:translate(var(--x),24px) scaleX(.6)}30%{opacity:.85}100%{opacity:0;transform:translate(calc(var(--x) * 2.2),-64px) scaleX(1.9) skewX(16deg)}}

.szs-ph--serum .szs-ph__fx{background:radial-gradient(70% 100% at 50% 40%,#f6f8fb,#c6d3e0 82%)}
.szs-ph--serum .sr-glow{left:calc(50% - 110px);top:40px;width:220px;height:150px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,196,.85),transparent)}
.szs-ph--serum .sr-ring{left:calc(50% - 32px);top:calc(64% - 11px);width:64px;height:22px;border:2px solid rgba(255,255,255,.95);border-radius:50%;box-shadow:0 0 0 1px rgba(120,150,180,.22);opacity:0;animation:szs-sr-ripple 3s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes szs-sr-ripple{0%{transform:scale(.2);opacity:0}8%{opacity:1}100%{transform:scale(4.4);opacity:0}}
.szs-ph--serum .sr-drop{left:calc(50% - 6px);top:0;width:12px;height:16px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:linear-gradient(#fff,#b4c7d9);box-shadow:0 2px 6px rgba(80,110,140,.3);animation:szs-sr-drop 3s cubic-bezier(.55,0,1,.7) infinite}
@keyframes szs-sr-drop{0%{transform:translateY(-24px);opacity:1}28%{transform:translateY(116px);opacity:1}30%,100%{transform:translateY(116px);opacity:0}}

.szs-ph--watch .szs-ph__fx{background:#0E1A2B}
.szs-ph--watch .wt-wrap{inset:-40%;transform:rotate(24deg)}
.szs-ph--watch .wt-silk{top:0;bottom:0;left:-80px;right:-80px;background:repeating-linear-gradient(90deg,#0f1f33 0 26px,#22395a 40px,#0f1f33 70px);filter:blur(7px);animation:szs-wt-silk 7s linear infinite}
@keyframes szs-wt-silk{to{transform:translateX(70px)}}
.szs-ph--watch .wt-case{left:calc(50% - 46px);top:calc(50% - 46px);width:92px;height:92px;padding:6px;border-radius:50%;background:conic-gradient(#c9ced6,#6c7480,#eef0f3,#7a828e,#c9ced6);box-shadow:0 18px 30px -10px rgba(0,0,0,.7)}
.szs-ph--watch .wt-dial{position:relative;width:100%;height:100%;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 40% 35%,#24374f,#0a1422)}
.szs-ph--watch .wt-hand{left:calc(50% - 1px);top:12%;width:2px;height:38%;border-radius:2px;background:#e8ebef;transform-origin:50% 100%;animation:szs-spin 9s linear infinite}
.szs-ph--watch .wt-hand.h2{top:22%;left:calc(50% - 1.5px);width:3px;height:28%;background:#c9ced6;animation-duration:60s}
.szs-ph--watch .wt-glint{inset:0;background:conic-gradient(from 0deg,transparent 0 40deg,rgba(255,255,255,.35) 55deg,transparent 70deg 360deg);animation:szs-spin 4.2s cubic-bezier(.6,0,.4,1) infinite}

.szs-ph--citrus .szs-ph__fx{background:radial-gradient(85% 100% at 28% 18%,#ffb36b,#ff6b2c 56%,#d6460f)}
.szs-ph--citrus .ct-slice{width:var(--s);height:var(--s);border-radius:50%;background:repeating-conic-gradient(#ffd27f 0 27deg,#fff4dc 27deg 30deg);box-shadow:0 0 0 5px #fff0d4,0 0 0 9px #ffa137,0 12px 26px rgba(110,30,0,.35);animation:szs-ct-float 6s ease-in-out infinite}
@keyframes szs-ct-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(34deg)}}
.szs-ph--citrus .ct-b{bottom:0;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.75);animation:szs-ct-rise 3.2s linear infinite}
@keyframes szs-ct-rise{0%{transform:translateY(40px);opacity:0}20%{opacity:1}100%{transform:translateY(-150px);opacity:0}}

.szs-ph--night .szs-ph__fx{background:linear-gradient(#0a1124,#182a4d 68%,#0b1426)}
.szs-ph--night .nd-bk{width:var(--s);height:var(--s);border-radius:50%;background:var(--c);filter:blur(5px);opacity:.55;animation:szs-twinkle 3s ease-in-out infinite}
.szs-ph--night .nd-road{left:0;right:0;bottom:0;height:62px;background:linear-gradient(#111a2e,#060a14)}
.szs-ph--night .nd-st{left:0;width:var(--w);height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--c));animation:szs-nd-streak var(--t) linear infinite}
@keyframes szs-nd-streak{from{transform:translateX(-160px)}to{transform:translateX(580px)}}