/* ==========================================================================
   VASTORE — HERO & STUDIO FILMS
   The opening statement and the promo reel grid.
   Reads every token from /theme.css.
   ========================================================================== */

/* ==========================================================================
   HERO
   ========================================================================== */

.next-hero{
 position:relative;isolation:isolate;overflow:hidden;
 background:var(--ink-900);color:var(--on-dark);
}
.next-hero>.container{position:relative;z-index:3}

/* Layered atmosphere: aurora blobs, hairline grid, fine grain */
.hero-atmos{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-atmos i{
 position:absolute;display:block;border-radius:50%;
 filter:blur(clamp(60px,9vw,130px));
 /* Own layer: the blur rasterises once and only the transform animates. */
 will-change:transform;
 animation:hero-drift 26s var(--ease-in-out) infinite alternate;
 translate:0 calc(var(--drift,0px) * .4);
}
.hero-atmos i:nth-child(1){
 width:52vw;height:52vw;top:-22%;right:-12%;
 background:color-mix(in srgb,var(--ember-600) 46%,transparent);opacity:.6;
}
.hero-atmos i:nth-child(2){
 width:42vw;height:42vw;bottom:-26%;left:-14%;
 background:color-mix(in srgb,var(--ink-500) 72%,transparent);opacity:.7;animation-delay:-9s;
}
.hero-atmos i:nth-child(3){
 width:30vw;height:30vw;top:42%;left:44%;
 background:color-mix(in srgb,var(--aqua-600) 30%,transparent);opacity:.45;animation-delay:-16s;
}
@keyframes hero-drift{
 from{transform:translate3d(0,0,0) scale(1)}
 to{transform:translate3d(5%,-7%,0) scale(1.18)}
}

/* Top line */
.hero-topline{
 display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
 padding-block:clamp(20px,2.4vw,32px);
 border-bottom:1px solid var(--on-dark-line);
 font-size:var(--fs-label);font-weight:600;letter-spacing:.12em;
 color:var(--on-dark-faint);text-transform:uppercase;
}
.hero-topline>span{display:flex;align-items:center;gap:var(--s-3)}
/* Live marker */
.hero-pulse{position:relative;width:7px;height:7px;flex:none;border-radius:50%;background:var(--aqua-400)}
.hero-pulse::after{
 content:'';position:absolute;inset:0;border-radius:50%;background:inherit;
 animation:ping 2.2s var(--ease-out) infinite;
}
@keyframes ping{from{transform:scale(1);opacity:.7}to{transform:scale(3.4);opacity:0}}

.hero-topline a{
 display:flex;align-items:center;gap:var(--s-3);color:var(--on-dark-muted);
 transition:color var(--t-base) var(--ease),gap var(--t-base) var(--ease-out);
}
.hero-topline a svg{transition:transform var(--t-base) var(--ease-spring)}
.hero-topline a:hover{color:var(--ember-400);gap:var(--s-4)}
.hero-topline a:hover svg{transform:translate(3px,-3px)}

/* Main grid */
.next-hero-grid{
 display:grid;grid-template-columns:1.1fr 1fr;
 gap:clamp(36px,5vw,72px);align-items:center;
 padding-block:clamp(44px,5.4vw,82px) clamp(40px,4.6vw,66px);
}

.next-copy{translate:0 calc(var(--drift,0px) * -.12)}
.next-copy h1{
 margin-bottom:var(--s-6);
 font-size:var(--fs-h1);font-weight:700;line-height:1.02;letter-spacing:var(--track-mega);
}
.next-copy h1 em{
 font-style:normal;display:inline-block;
 background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.next-copy>p{max-width:48ch;font-size:var(--fs-lead);line-height:1.7;color:var(--on-dark-muted)}

.next-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-5);margin-top:var(--s-7)}

.watch-film{
 display:flex;align-items:center;gap:var(--s-3);min-height:48px;
 font-size:var(--fs-small);font-weight:600;color:var(--on-dark);
 transition:color var(--t-base) var(--ease);
}
.watch-film>span{
 position:relative;flex:none;
 display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
 border:1px solid var(--on-dark-line-strong);
 transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease),
            border-color var(--t-base) var(--ease),transform var(--t-base) var(--ease-spring);
}
.watch-film>span::after{
 content:'';position:absolute;inset:-5px;border-radius:50%;
 border:1px solid color-mix(in srgb,var(--ember-500) 40%,transparent);
 opacity:0;transition:opacity var(--t-base) var(--ease),inset var(--t-base) var(--ease-out);
}
.watch-film:hover>span{background:var(--ember-500);color:var(--ink-900);border-color:transparent;transform:scale(1.06)}
.watch-film:hover>span::after{opacity:1;inset:-9px}

/* Discipline pills */
.hero-disciplines{
 display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:clamp(28px,3.4vw,46px);
}
.hero-disciplines span{
 display:flex;align-items:center;gap:var(--s-2);
 padding:8px 14px;border-radius:var(--r-pill);
 background:var(--glass);border:1px solid var(--on-dark-line);
 font-size:var(--fs-micro);font-weight:600;letter-spacing:.06em;color:var(--on-dark-muted);
 transition:border-color var(--t-base) var(--ease),color var(--t-base) var(--ease),
            transform var(--t-base) var(--ease-out);
}
.hero-disciplines span:hover{border-color:var(--ember-400);color:var(--n-0);transform:translateY(-2px)}

/* — Reel stage --------------------------------------------------------- */
.reel-stage{
 position:relative;
 border-radius:var(--r-lg);overflow:hidden;
 background:var(--ink-850);border:1px solid var(--on-dark-line-strong);
 box-shadow:0 40px 90px -30px rgb(3 7 16 / .9);
 transform:perspective(1500px) rotateY(-5deg) rotateX(1.5deg);
 translate:0 calc(var(--drift,0px) * .06);
 animation:reel-in 1.1s var(--ease-out) both;
 transition:transform var(--t-slow) var(--ease-out);
}
.reel-stage:hover{transform:perspective(1500px) rotateY(-2deg) rotateX(0deg) translateY(-6px)}
/* Glowing rim */
.reel-stage::after{
 content:'';position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;padding:1px;
 background:linear-gradient(150deg,color-mix(in srgb,var(--ember-500) 62%,transparent),transparent 42%,
   color-mix(in srgb,var(--aqua-400) 34%,transparent));
 mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
 mask-composite:exclude;
}

.reel-top{
 display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
 padding:var(--s-4) var(--s-5);
 border-bottom:1px solid var(--on-dark-line);
 font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-faint);
}
.reel-top>span:first-child{display:flex;align-items:center;gap:var(--s-2);color:var(--on-dark-muted)}

.hero-reel{position:relative;aspect-ratio:16/9;background:var(--ink-900)}
.hero-reel video{display:block;width:100%;height:100%;object-fit:contain}

.reel-open{
 position:absolute;right:var(--s-5);bottom:var(--s-4);z-index:3;
 display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
 background:var(--ember-500);color:var(--ink-900);
 box-shadow:0 10px 30px -6px rgb(6 11 21 / .7);
 transition:transform var(--t-base) var(--ease-spring),background var(--t-base) var(--ease);
}
.reel-open::before{
 content:'';position:absolute;inset:-7px;border-radius:50%;
 border:1px solid color-mix(in srgb,var(--ember-400) 60%,transparent);
 animation:ping 2.6s var(--ease-out) infinite;
}
.reel-open:hover{transform:scale(1.1);background:var(--ember-400)}

.reel-pause{
 position:absolute;left:var(--s-4);bottom:var(--s-4);z-index:3;
 display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
 background:color-mix(in srgb,var(--ink-900) 90%,transparent);color:var(--on-dark);
 border:1px solid var(--on-dark-line-strong);backdrop-filter:blur(6px);
 transition:background var(--t-base) var(--ease),color var(--t-base) var(--ease)
}
.reel-pause:hover{background:var(--on-dark);color:var(--ink-900)}

.reel-bottom{
 display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
 padding:var(--s-5);
}
.reel-bottom p{font-size:var(--fs-small);line-height:1.6;color:var(--on-dark-muted)}
.reel-bottom strong{color:var(--on-dark);font-weight:600}
.reel-bottom a{
 display:flex;align-items:center;gap:var(--s-3);min-height:44px;
 font-size:var(--fs-small);font-weight:600;color:var(--ember-400);
 transition:gap var(--t-base) var(--ease-out);
}
.reel-bottom a svg{transition:transform var(--t-base) var(--ease-spring)}
.reel-bottom a:hover{gap:var(--s-4)}
.reel-bottom a:hover svg{transform:translate(3px,-3px)}

/* Footline with scroll cue */
.hero-footline{
 display:flex;align-items:center;justify-content:space-between;gap:var(--s-5);
 padding-block:var(--s-5) var(--s-6);
 border-top:1px solid var(--on-dark-line);
 font-size:var(--fs-small);color:var(--on-dark-faint);
}
.hero-footline a{
 display:flex;align-items:center;gap:var(--s-3);min-height:44px;
 font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-muted);
 transition:color var(--t-base) var(--ease);
}
.hero-footline a:hover{color:var(--ember-400)}
.hero-footline a svg{animation:nudge 2s var(--ease-in-out) infinite}
@keyframes nudge{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(5px);opacity:.55}}

@keyframes reel-in{
 from{opacity:0;transform:perspective(1500px) rotateY(-9deg) rotateX(3deg) translateY(42px) scale(.96)}
 to{opacity:1;transform:perspective(1500px) rotateY(-5deg) rotateX(1.5deg) translateY(0) scale(1)}
}

/* Staggered entrance for the copy column */
.next-copy h1,.next-copy>p,.next-actions,.hero-disciplines{
 animation:copy-in .95s var(--ease-out) both;
}
.next-copy>p{animation-delay:.12s}
.next-actions{animation-delay:.22s}
.hero-disciplines{animation-delay:.32s}
@keyframes copy-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ==========================================================================
   STUDIO FILMS
   ========================================================================== */

.promo-section{
 position:relative;isolation:isolate;overflow:hidden;
 padding-block:var(--section-y);
 background:var(--ink-900);color:var(--on-dark);
}
.promo-section>.container{position:relative;z-index:2}

.promo-heading{
 display:grid;grid-template-columns:1.35fr 1fr;align-items:end;
 gap:var(--s-6) var(--s-8);margin-bottom:var(--s-7);
}
.promo-heading h2{font-weight:600}
.promo-heading em{font-style:normal;background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.promo-heading>p{max-width:38ch;font-size:var(--fs-body);color:var(--on-dark-muted)}

.promo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4)}

.promo-card{
 position:relative;isolation:isolate;min-width:0;
 overflow:hidden;border-radius:var(--r-lg);text-align:left;color:inherit;
 background:var(--ink-850);border:1px solid var(--on-dark-line);
 transition:transform var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease),
            box-shadow var(--t-base) var(--ease-out);
}
.promo-card:hover{
 transform:translateY(-8px);
 border-color:color-mix(in srgb,var(--ember-500) 56%,transparent);
 box-shadow:0 32px 64px -24px rgb(3 7 16 / .9);
}

.promo-poster{position:relative;aspect-ratio:16/9;overflow:hidden}
.promo-poster picture{display:block;width:100%;height:100%}
.promo-poster img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out),filter var(--t-base) var(--ease)}
.promo-card:hover .promo-poster img{transform:scale(1.06);filter:saturate(1.1)}
.promo-poster::after{
 content:'';position:absolute;inset:0;
 background:linear-gradient(to top,color-mix(in srgb,var(--ink-950) 72%,transparent),transparent 55%);
}

.film-play{
 position:absolute;left:var(--s-5);bottom:var(--s-4);z-index:2;
 display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
 background:var(--ember-500);color:var(--ink-900);
 transition:transform var(--t-base) var(--ease-spring),background var(--t-base) var(--ease);
}
.promo-card:hover .film-play{transform:scale(1.12);background:var(--ember-400)}
.film-time{
 position:absolute;right:var(--s-4);bottom:var(--s-4);z-index:2;
 padding:4px 9px;border-radius:var(--r-xs);
 font:600 var(--fs-micro)/1.4 var(--mono);
 background:color-mix(in srgb,var(--ink-950) 88%,transparent);
 border:1px solid var(--on-dark-line-strong);color:var(--on-dark-muted);
}

.promo-card-copy{padding:clamp(20px,2.2vw,28px)}
.promo-card-copy small{font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--ember-400)}
.promo-card-copy h3{
 display:flex;justify-content:space-between;gap:var(--s-2);
 margin:var(--s-3) 0;font-size:var(--fs-h4);font-weight:650;
}
.promo-card-copy h3 svg{flex:none;transition:transform var(--t-base) var(--ease-spring)}
.promo-card:hover .promo-card-copy h3 svg{transform:translate(4px,-4px)}
.promo-card-copy p{font-size:var(--fs-small);line-height:1.68;color:var(--on-dark-muted)}

.promo-note{
 display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-6);
 font-size:var(--fs-small);color:var(--on-dark-faint);
}
.promo-note svg{flex:none;width:16px;height:16px;color:var(--ember-400)}

.promo-dialog{max-height:94vh;overflow:auto;padding:var(--s-5)}
.promo-player{width:100%;aspect-ratio:16/9;background:var(--ink-900);border-radius:var(--r-sm)}
.film-caption{font-size:var(--fs-small);color:var(--ink-muted)}

/* ==========================================================================
   LEGACY REVEAL CLASSES — kept so inner pages keep working
   ========================================================================== */

.motion-ready{
 opacity:0;transform:translateY(24px);
 transition:opacity var(--t-slow) var(--ease-out) var(--reveal-delay,0ms),
            transform var(--t-slow) var(--ease-out) var(--reveal-delay,0ms);
}
.motion-ready.motion-visible{opacity:1;transform:none}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (min-width:1600px){
 .next-hero-grid{padding-block:clamp(70px,5.4vw,96px) clamp(58px,4.6vw,78px)}
}

@media (max-width:1050px){
 .next-hero-grid{grid-template-columns:1fr 1fr;gap:var(--s-6)}
 .reel-stage{transform:none;animation-name:reel-in-flat}
 .reel-stage:hover{transform:translateY(-4px)}
 .reel-top{padding:var(--s-3) var(--s-4)}
 .reel-bottom{padding:var(--s-4);flex-wrap:wrap}
 .promo-grid{gap:var(--s-3)}
}

@media (max-width:760px){
 .next-hero-grid{grid-template-columns:1fr;padding-block:var(--s-7) var(--s-6);gap:var(--s-7)}
 .next-copy>p{max-width:52ch}
 .hero-topline{padding-block:var(--s-4);font-size:var(--fs-micro);letter-spacing:.08em}
 .hero-topline>a{display:none}
 .next-actions{gap:var(--s-4);margin-top:var(--s-6)}
 .reel-stage{max-width:580px}
 .hero-footline{align-items:flex-start;font-size:var(--fs-small)}
 .hero-footline>p{max-width:24ch}
 .hero-footline a{font-size:var(--fs-micro);text-align:right}
 .promo-heading{grid-template-columns:1fr}
 .promo-grid{grid-template-columns:1fr;gap:var(--s-5)}
 .promo-dialog{padding:var(--s-4)}
}

@keyframes reel-in-flat{
 from{opacity:0;transform:translateY(34px) scale(.97)}
 to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
 .reel-stage{transform:none;animation:none}
 .reel-stage:hover{transform:none}
 .hero-atmos i,.hero-pulse::after,.reel-open::before,.hero-footline a svg{animation:none}
 .motion-ready{opacity:1;transform:none}
}