/* Nexorcomps cinematic product reel: letterboxed black stage, volumetric spotlight, haze, floor reflection,
   slow push-in per product, title reveals, anamorphic flare + dip to black between shots, chapter timeline. */
.reel{position:relative;background:#000;color:#fff;padding:0;overflow:hidden;isolation:isolate}
.reel-frame{position:relative;height:min(86vh,820px);min-height:560px;overflow:hidden}
.reel-frame::before,.reel-frame::after{content:"";position:absolute;left:0;right:0;height:7%;background:#000;z-index:8;pointer-events:none}
.reel-frame::before{top:0;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.reel-frame::after{bottom:0;box-shadow:0 -1px 0 rgba(255,255,255,.06)}
.r-haze{position:absolute;inset:-20%;z-index:1;pointer-events:none;opacity:.5;
  background:radial-gradient(40% 30% at 30% 60%,rgba(255,255,255,.05),transparent 70%),radial-gradient(35% 28% at 70% 40%,rgba(255,255,255,.045),transparent 70%)}
@media (prefers-reduced-motion:no-preference){.r-haze{animation:haze 22s ease-in-out infinite alternate}}
@keyframes haze{to{transform:translate(6%,-4%) scale(1.08)}}
.r-grain{position:absolute;inset:-50%;z-index:7;pointer-events:none;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){.r-grain{animation:grain 1s steps(4) infinite}}
.r-vig{position:absolute;inset:0;z-index:6;pointer-events:none;background:radial-gradient(90% 80% at 60% 50%,transparent 45%,rgba(0,0,0,.85) 100%)}

/* a shot */
.shot{position:absolute;inset:0;opacity:0;visibility:hidden;z-index:2;--glow:179,18,27}
.shot.on{opacity:1;visibility:visible}
.shot .beam{position:absolute;left:58%;top:-10%;width:60%;height:95%;transform:translateX(-50%);z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,244,230,.16),rgba(255,244,230,.02) 70%,transparent);clip-path:polygon(42% 0,58% 0,100% 100%,0 100%);filter:blur(6px)}
.shot .glow{position:absolute;left:62%;top:52%;width:52vmin;height:52vmin;transform:translate(-50%,-50%);border-radius:50%;z-index:1;
  background:radial-gradient(circle,rgba(var(--glow),.55),rgba(var(--glow),.12) 45%,transparent 70%);filter:blur(10px)}
.shot .floor{position:absolute;left:0;right:0;bottom:7%;height:30%;z-index:1;background:radial-gradient(60% 100% at 62% 0,rgba(255,255,255,.07),transparent 70%)}
.prod{position:absolute;left:62%;top:50%;width:min(48vw,640px);height:62%;transform:translate(-50%,-52%);z-index:3;display:flex;align-items:flex-end;justify-content:center}
.prod img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 30px 40px rgba(0,0,0,.8)) drop-shadow(0 0 30px rgba(var(--glow),.25))}
.prod .refl{position:absolute;left:0;right:0;top:100%;height:45%;display:flex;justify-content:center;overflow:hidden;opacity:.28;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%)}
.prod .refl img{transform:scaleY(-1);filter:blur(1.5px);max-height:none;height:auto;align-self:flex-start}

/* titles */
.r-copy{position:absolute;left:max(16px,calc((100vw - 1200px)/2 + 16px));top:50%;transform:translateY(-50%);z-index:5;width:min(520px,44vw)}
.r-chap{font-family:var(--mono);font-size:.8rem;color:#a3a3a3;display:flex;gap:12px;align-items:center;margin:0 0 14px}
.r-chap b{color:#ff5d4d;font-weight:500}
.r-chap i{display:block;width:40px;height:1px;background:rgba(255,255,255,.35)}
.r-brand{font-family:var(--head);font-style:italic;font-weight:700;color:#ff6b5e;margin:0 0 6px;font-size:1rem}
.r-title{font-family:var(--head);font-weight:800;font-size:clamp(2.4rem,5vw,4.6rem);line-height:.95;letter-spacing:-.03em;margin:0}
.r-title .ln{display:block;overflow:hidden;padding-bottom:.05em}
.r-title .ln>span{display:inline-block}
.r-name{font-family:var(--body);font-weight:600;font-size:1.05rem;margin:18px 0 4px;color:#fff}
.r-spec{font-family:var(--mono);font-size:.86rem;color:#adadad;margin:0}
.r-price{font-family:var(--mono);font-size:1.6rem;margin:16px 0 0;display:flex;gap:12px;align-items:baseline}
.r-price s{font-size:.95rem;color:#8a8a8a}
.r-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

@media (prefers-reduced-motion:no-preference){
  .shot.on .prod{animation:push 6.6s cubic-bezier(.25,.1,.25,1) forwards}
  .shot.on .prod img:not(.ri){animation:prodin 1.2s cubic-bezier(.2,.8,.2,1) both}
  .shot.on .beam{animation:beamin 1.4s ease-out both}
  .shot.on .glow{animation:glowin 2s ease-out both}
  .shot.on .r-title .ln>span{transform:translateY(110%);animation:lnup .9s cubic-bezier(.2,.8,.2,1) forwards}
  .shot.on .r-title .ln:nth-child(2)>span{animation-delay:.12s}
  .shot.on .r-chap,.shot.on .r-brand,.shot.on .r-name,.shot.on .r-spec,.shot.on .r-price,.shot.on .r-acts{opacity:0;animation:fadeup .8s cubic-bezier(.2,.8,.2,1) forwards}
  .shot.on .r-chap{animation-delay:.05s}.shot.on .r-brand{animation-delay:.15s}.shot.on .r-name{animation-delay:.45s}.shot.on .r-spec{animation-delay:.55s}.shot.on .r-price{animation-delay:.65s}.shot.on .r-acts{animation-delay:.8s}
}
@keyframes push{from{transform:translate(-50%,-52%) scale(.96)}to{transform:translate(-52%,-52%) scale(1.06)}}
@keyframes prodin{from{opacity:0;filter:blur(12px) brightness(.4)}to{opacity:1}}
@keyframes beamin{from{opacity:0}30%{opacity:1.4}to{opacity:1}}
@keyframes glowin{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1}}
@keyframes lnup{to{transform:none}}
@keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* transition: anamorphic flare streak + dip to black */
.r-dip{position:absolute;inset:0;background:#000;z-index:5;opacity:0;pointer-events:none;transition:opacity .45s ease}
.r-dip.on{opacity:1}
.r-flare{position:absolute;left:-30%;right:-30%;top:50%;height:2px;z-index:6;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,90,70,.0) 20%,rgba(255,120,100,.9) 48%,#fff 50%,rgba(255,120,100,.9) 52%,rgba(255,90,70,0) 80%,transparent);
  box-shadow:0 0 18px 4px rgba(255,80,60,.45),0 0 60px 10px rgba(255,80,60,.2)}
.r-flare.go{animation:flare .9s ease-out}
@keyframes flare{0%{opacity:0;transform:translateX(-30%) scaleX(.4)}30%{opacity:1}100%{opacity:0;transform:translateX(30%) scaleX(1.2)}}

/* chapter timeline */
.r-time{position:absolute;left:0;right:0;bottom:calc(7% + 14px);z-index:9;pointer-events:none}
.r-time .wrap{display:flex;align-items:flex-end;gap:16px;pointer-events:auto}
.r-chaps{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;flex:1}
.r-chaps button{background:none;border:0;color:#8a8a8a;text-align:left;padding:0;font:inherit;font-size:.78rem;cursor:pointer}
.r-chaps button span{display:block;height:2px;background:rgba(255,255,255,.18);margin-bottom:8px;position:relative;overflow:hidden}
.r-chaps button.done span{background:rgba(255,255,255,.55)}
.r-chaps button.on{color:#fff}
.r-chaps button.on span::after{content:"";position:absolute;inset:0;background:#ff5d4d;transform-origin:left;animation:fillbar var(--dur,6.6s) linear forwards}
.reel.paused .r-chaps button.on span::after{animation-play-state:paused}
.r-chaps em{font-style:normal;font-family:var(--mono);color:#ff6b5e;margin-right:6px}
.r-ctrl{display:flex;gap:6px}
.r-ctrl button{width:34px;height:34px;border-radius:4px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.5);color:#fff;display:grid;place-items:center}
.r-ctrl button:hover{border-color:#fff}
.r-ctrl svg{width:14px;height:14px}
.reel-head{position:absolute;top:calc(7% + 18px);left:0;right:0;z-index:9;pointer-events:none}
.reel-head .wrap{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);font-size:.78rem;color:#8a8a8a}
.reel-head b{color:#fff;font-weight:500}

@media(max-width:900px){
  .reel-frame{height:760px;min-height:0}
  .prod{left:50%;top:26%;width:80vw;height:28%;transform:translate(-50%,-50%)}
  .prod .refl{display:none}
  @keyframes push{from{transform:translate(-50%,-50%) scale(.96)}to{transform:translate(-50%,-50%) scale(1.05)}}
  .shot .glow{left:50%;top:26%;width:80vw;height:80vw}
  .shot .beam{left:50%;width:100%;height:60%}
  .r-copy{left:16px;right:16px;width:auto;top:auto;bottom:calc(7% + 64px);transform:none}
  .r-chaps button{font-size:0}
  .r-chaps em{display:none}
  .r-chaps button span{margin-bottom:0}
  .reel-head .wrap span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){.r-flare{display:none}}