/* =========================================================
   Aria Musica: visual enhancement layer (loaded after main.css)
   ========================================================= */
:root{--header-h:98px}
@media (max-width:900px){:root{--header-h:78px}}

/* ---------- Real logo in the header ---------- */
.brand img{width:auto;height:74px;transition:height .4s var(--ease)}
.site-header.is-solid{height:80px}
.site-header.is-solid .brand img{height:58px}
@media (max-width:900px){.brand img{width:auto;height:58px}.site-header.is-solid{height:70px}.site-header.is-solid .brand img{height:50px}}
.site-header{border-bottom-color:rgba(184,154,80,.28)}

/* ---------- Reveal on scroll (only when JS is running) ---------- */
.js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1s var(--ease);transition-delay:var(--d,0s)}
.js .rv.is-in{opacity:1;transform:none}
.js .frame img,.js .arch img{clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease) .1s}
.js .frame.is-in img,.js .arch.is-in img{clip-path:inset(0)}
@supports (animation-timeline:view()){
  .frame,.arch{animation:drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  @keyframes drift{from{translate:0 26px}to{translate:0 -26px}}
}

/* ---------- Headings: gold rule + shimmering accent word ---------- */
.section .h2::after{content:"";display:block;width:84px;height:2px;margin-top:.55em;background:linear-gradient(90deg,var(--gold),rgba(184,154,80,0))}
.formats .h2::after{margin-inline:auto;background:linear-gradient(90deg,rgba(184,154,80,0),var(--gold),rgba(184,154,80,0))}
em.gilt{font-style:normal;background:linear-gradient(100deg,var(--gold) 0%,var(--gold-hi) 25%,var(--gold) 50%,var(--gold-hi) 75%,var(--gold) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);animation:gilt 6s linear infinite}
@keyframes gilt{to{background-position:-250% 0}}
.eyebrow{display:flex;align-items:center;gap:.9rem;margin:0 0 1.4rem;font:500 .8rem/1 var(--text);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-hi)}
.eyebrow::before{content:"";width:44px;height:1px;background:var(--gold)}

/* ---------- Hero ---------- */
.hero__media img{animation:kenburns 26s ease-in-out infinite alternate;transform-origin:62% 40%}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero__glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(46% 55% at 74% 34%,rgba(230,212,160,.22),transparent 70%),radial-gradient(36% 40% at 12% 100%,rgba(184,154,80,.2),transparent 70%);mix-blend-mode:screen;animation:glowPulse 8s ease-in-out infinite alternate}
@keyframes glowPulse{from{opacity:.55}to{opacity:1}}
.hero__dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__title{font-size:clamp(2.7rem,6.6vw,6.6rem);max-width:12ch;line-height:1.02}
.hero__content::before{content:"";position:absolute;left:var(--gutter);top:-1.2rem;width:1px;height:0}

/* ---------- Marquee ---------- */
.marquee{position:relative;overflow:hidden;background:var(--black);border-block:1px solid rgba(184,154,80,.4);padding:1.1rem 0}
.marquee__track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{display:flex;align-items:center;gap:2.2rem;padding-right:2.2rem;font-family:var(--display);font-size:clamp(1.8rem,3.6vw,3rem);line-height:1.1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(230,212,160,.85)}
.marquee__item:nth-child(even){color:var(--gold-hi);-webkit-text-stroke:0}
.marquee__item::after{content:"";flex:none;width:9px;height:9px;background:var(--gold);transform:rotate(45deg)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Watermark emblem behind sections ---------- */
.welcome,.founder,.lessons,.bio,.closing{position:relative;overflow:hidden}
.welcome::before,.founder::before,.lessons::before,.bio::before,.closing::before{content:"";position:absolute;width:min(52vw,640px);aspect-ratio:1;background:url(../logo/AM_Logo_Gold_ICO.svg) center/contain no-repeat;opacity:.07;pointer-events:none}
.welcome::before{right:-8%;top:-6%}
.founder::before{left:-12%;bottom:-18%;opacity:.08}
.lessons::before,.bio::before{right:-10%;top:-8%;opacity:.09}
.closing::before{left:-10%;top:-10%;opacity:.1}
.welcome>.wrap,.founder>.wrap,.lessons>.wrap,.bio>.wrap,.closing>.wrap{position:relative}

/* ---------- Welcome: rotating badge ---------- */
.welcome__photo{position:relative}
.badge{position:absolute;left:-58px;bottom:-46px;width:132px;height:132px;border-radius:50%;background:var(--black);color:var(--gold-hi);display:grid;place-items:center;box-shadow:0 0 0 1px var(--gold),0 18px 40px rgba(17,17,17,.35);z-index:3}
.badge svg.badge__ring{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);animation:spin 24s linear infinite}
.badge text{font:500 10.4px var(--text);letter-spacing:.2em;text-transform:uppercase;fill:currentColor}
.badge .badge__mark{position:relative;width:44px;height:44px;color:var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Lessons: glowing stage + glossy keys ---------- */
.lessons{background:radial-gradient(80% 60% at 50% 0%,rgba(184,154,80,.22),transparent 70%),radial-gradient(50% 50% at 100% 100%,rgba(184,154,80,.12),transparent 70%),var(--black)}
.key{position:relative;overflow:hidden}
.key::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.7) 50%,transparent 65%);transform:translateX(-120%);transition:transform .9s var(--ease);pointer-events:none}
.key:hover::before{transform:translateX(120%)}
.key::after{content:attr(data-note);position:absolute;right:1.2rem;top:.4rem;font-family:var(--display);font-size:7rem;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(138,111,46,.45);pointer-events:none}
.key__body{position:relative}

/* ---------- Learning: glass cards ---------- */
.learning{background:linear-gradient(180deg,var(--black),#1a160d)}
.learning__list li{padding:3.4rem 1.6rem 2rem;border:1px solid rgba(184,154,80,.38);background:linear-gradient(180deg,rgba(184,154,80,.1),rgba(184,154,80,0));transition:transform .5s var(--ease),border-color .4s,background .4s}
.learning__list li:hover{transform:translateY(-6px);border-color:var(--gold-hi);background:linear-gradient(180deg,rgba(184,154,80,.18),rgba(184,154,80,.02))}
.learning__mark{left:1.2rem;top:-24px;padding:0 10px}

/* ---------- Founder caption ---------- */
.frame__cap{position:absolute;left:0;right:0;bottom:0;padding:3.4rem 1.4rem 1.2rem;color:var(--white);background:linear-gradient(0deg,rgba(17,17,17,.88),rgba(17,17,17,0));font-family:var(--display);font-size:1.6rem;line-height:1.15}
.frame__cap span{display:block;margin-top:.3rem;font:400 .78rem/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}

/* ---------- Closing: dark, glowing ---------- */
.closing{background:radial-gradient(70% 90% at 85% 40%,rgba(184,154,80,.26),transparent 70%),var(--black);color:var(--white)}
.closing .h2{font-size:clamp(2.4rem,5.2vw,4.6rem);color:var(--white)}
.closing .lead{color:rgba(255,255,255,.9)}
.closing .strip{border-top-color:rgba(255,255,255,.2);color:var(--white)}
.closing .strip a{color:var(--gold-hi)}
.closing .staff-divider__mark{background:var(--black)}
.arch{box-shadow:0 0 140px rgba(184,154,80,.3)}

/* ---------- Inner page hero: emblem + glow ---------- */
.page-hero{background:radial-gradient(60% 120% at 90% 0%,rgba(184,154,80,.28),transparent 70%),var(--black)}
.page-hero::before{content:"";position:absolute;right:-4%;top:50%;width:min(44vw,520px);aspect-ratio:1;transform:translateY(-50%);background:url(../logo/AM_Logo_Gold_ICO.svg) center/contain no-repeat;opacity:.16;pointer-events:none}

/* ---------- Buttons: gold sheen ---------- */
.btn{position:relative;overflow:hidden}
.btn--gold::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s var(--ease)}
.btn--gold:hover::before{transform:translateX(130%)}
.btn>*{position:relative}

/* ---------- Footer ---------- */
.site-footer{background:radial-gradient(60% 90% at 85% 0%,rgba(184,154,80,.16),transparent 70%),var(--black);border-top:0;position:relative}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--gold),var(--gold-hi),var(--gold),transparent)}
.site-footer__brand img{width:230px}

/* ---------- Cursor glow (fine pointers only) ---------- */
.cursor-glow{position:fixed;left:0;top:0;z-index:4;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(230,212,160,.16),transparent 65%);mix-blend-mode:screen;opacity:0;transition:opacity .5s}
.cursor-glow.is-on{opacity:1}

@media (max-width:900px){
  .badge{left:auto;right:-6px;bottom:-34px;width:104px;height:104px}
  .badge .badge__mark{width:34px;height:34px}
  .key::after{font-size:5rem}
}
@media (prefers-reduced-motion:reduce){
  .hero__media img,.hero__glow,.marquee__track,em.gilt,.badge svg.badge__ring{animation:none!important}
  .js .rv{opacity:1;transform:none}
  .js .frame img,.js .arch img{clip-path:none}
  .frame,.arch{animation:none!important}
  .cursor-glow,.hero__dust{display:none}
}

/* Keep the eyebrow clear of the drawn staff */
.hero__staff{top:calc(var(--header-h) + 1vh);height:clamp(110px,16vh,170px)}
.hero__title{font-size:clamp(2.6rem,5.9vw,5.9rem)}
.hero__text{margin-bottom:1.5rem}

/* =========================================================
   v1.2: staff at the bottom, clean piano keys, round cursor,
   scroll-to-top (left) and WhatsApp number (right)
   ========================================================= */

/* Staff and notes sit above the keyboard, not on the pianist's head */
.hero__content{order:1}
.hero__staff{position:relative;order:2;top:auto;left:auto;right:auto;width:100%;height:clamp(70px,11vh,110px);margin-top:.4rem;z-index:2}
.hero__keys{order:3}
.hero__hint{bottom:calc(clamp(92px,15vh,150px) + clamp(70px,11vh,110px) + 1.4rem)}

/* Keys: pure white and pure black, with white gloss instead of yellow tints */
.hero__keys .k{background:linear-gradient(180deg,#fff 0%,#fff 72%,#efefef 100%);border-right:1px solid rgba(17,17,17,.3);box-shadow:inset 0 3px 0 #fff,inset 0 -6px 0 rgba(17,17,17,.07)}
.hero__keys .k--black{background:linear-gradient(180deg,#000 0%,#171717 100%);border:1px solid #000;border-top:0;box-shadow:inset 0 -5px 0 rgba(255,255,255,.1)}
.hero__keys .k--black::after{content:"";position:absolute;left:12%;right:12%;top:0;height:42%;border-radius:0 0 4px 4px;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0));pointer-events:none}
.hero__keys .k.is-down{background:linear-gradient(180deg,#e6e6e6 0%,#fff 100%);box-shadow:inset 0 -2px 0 rgba(17,17,17,.12),0 0 36px rgba(255,255,255,.9)}
.hero__keys .k--black.is-down{background:linear-gradient(180deg,#3a3a3a 0%,#121212 100%);box-shadow:inset 0 -2px 0 rgba(255,255,255,.2),0 0 26px rgba(255,255,255,.5)}
.key{background:linear-gradient(180deg,#fff 0%,#fff 62%,#f3f3f3 100%);box-shadow:0 12px 0 #d4d4d4,0 28px 40px rgba(0,0,0,.6)}
.key:hover,.key:focus-visible,.key.is-down{background:#fff;box-shadow:0 2px 0 #d4d4d4,0 0 60px rgba(255,255,255,.3),0 10px 20px rgba(0,0,0,.6)}

/* Round cursor (mouse only; JS adds .has-cursor) */
.has-cursor,.has-cursor *{cursor:none!important}
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:auto!important}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .3s}
.cur-dot.is-on,.cur-ring.is-on{opacity:1}
.cur-dot.is-off,.cur-ring.is-off{opacity:0}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--gold)}
.cur-ring{width:42px;height:42px;margin:-21px 0 0 -21px}
.cur-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--gold);transition:transform .35s var(--ease),background .35s,border-color .35s}
.cur-ring.is-link::before{transform:scale(1.55);background:rgba(184,154,80,.16);border-color:var(--gold-hi)}
.cur-ring.is-press::before{transform:scale(.78)}
.cursor-glow{display:none}

/* Scroll to top (left) */
.to-top{position:fixed;z-index:90;left:max(1.1rem,env(safe-area-inset-left));bottom:max(1.1rem,env(safe-area-inset-bottom));width:52px;height:52px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:var(--black);color:var(--gold-hi);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .35s,transform .35s var(--ease),visibility 0s .35s,background .25s}
.to-top.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .35s,transform .35s var(--ease)}
.to-top:hover{background:#000;transform:translateY(-3px)}
.to-top__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.to-top__ring circle{fill:none;stroke-width:2}
.to-top__track{stroke:rgba(184,154,80,.3)}
.to-top__arc{stroke:var(--gold);stroke-linecap:round}
.to-top__arrow{position:relative;width:20px;height:20px}

/* WhatsApp number (right) */
.wa-float{width:auto;height:56px;padding:0 1.35rem 0 1.05rem;border-radius:999px;display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font:500 .95rem/1 var(--text);letter-spacing:.01em}
.wa-float__num{white-space:nowrap}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(184,154,80,.55);animation:waPulse 2.8s ease-out infinite;pointer-events:none}
@keyframes waPulse{0%{box-shadow:0 0 0 0 rgba(184,154,80,.55)}70%,100%{box-shadow:0 0 0 16px rgba(184,154,80,0)}}
@media (max-width:420px){.wa-float{height:50px;padding:0 1rem 0 .85rem;font-size:.85rem}.to-top{width:46px;height:46px}}
@media (prefers-reduced-motion:reduce){.wa-float::after{animation:none}}

/* v1.2.1: mobile menu overlay must cover the whole screen.
   backdrop-filter on the header made the fixed menu size itself to the header bar. */
@media (max-width:900px){
  .site-header.is-solid{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(17,17,17,.98)}
  .nav{height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain}
  .brand{position:relative;z-index:120}
}

/* v1.2.2: on phones and tablets the photo gets its own space, so the text never covers the face */
@media (max-width:900px){
  .hero{min-height:0;justify-content:flex-start;padding-top:calc(max(62svh,430px) - 5.5rem)}
  .hero__media{inset:0 0 auto 0;height:max(62svh,430px)}
  .hero__media img{position:absolute;inset:0;width:100%;height:100%;object-position:41% 18%;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);mask-image:linear-gradient(180deg,#000 58%,transparent 100%);transform-origin:41% 25%}
  .hero__shade{background:linear-gradient(180deg,rgba(17,17,17,.6) 0,rgba(17,17,17,0) 20%)}
  .hero__glow{background:radial-gradient(60% 40% at 50% 22%,rgba(230,212,160,.2),transparent 70%)}
  .hero__content{padding-bottom:1rem}
  .hero__keys{margin-top:.5rem}
}
.wa-float.is-away{opacity:0;pointer-events:none;transform:translateY(20px)}

/* v1.2.3: WhatsApp button shows the icon only (the number stays in the link and for screen readers) */
.wa-float,.wa-float:hover{width:56px;height:56px;padding:0;justify-content:center;gap:0}
.wa-float__num{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wa-float svg{width:28px;height:28px}
@media (max-width:420px){.wa-float,.wa-float:hover{width:50px;height:50px;padding:0}}

/* v1.3: new sunset hero photo + text appears together with the photo (no waiting) */
.hero__media{animation:heroIn .7s ease both}
@keyframes heroIn{from{opacity:0}}
.hero__content{animation-delay:.1s;animation-duration:.7s}
.hero__keys{animation-delay:.3s;animation-duration:.7s}
.hero__hint{animation-delay:.5s}
.hero__staff-lines line{animation-duration:1.4s}
.note__body{animation-delay:calc(.45s + var(--i)*.09s),calc(1.5s + var(--i)*.3s)}
.hero__media img{object-position:10% 40%}
.hero__glow{background:radial-gradient(46% 55% at 74% 34%,rgba(230,212,160,.1),transparent 70%),radial-gradient(36% 40% at 12% 100%,rgba(184,154,80,.18),transparent 70%)}
@media (max-width:900px){
  .hero__media img{object-position:50% 24%;transform-origin:50% 26%}
  .hero__glow{background:radial-gradient(60% 40% at 50% 22%,rgba(230,212,160,.1),transparent 70%)}
}
.hero__shade{background:linear-gradient(180deg,rgba(17,17,17,.5) 0%,rgba(17,17,17,0) 26%,rgba(17,17,17,.3) 60%,rgba(17,17,17,.94) 100%),linear-gradient(90deg,rgba(17,17,17,.62),rgba(17,17,17,0) 62%)}
@media (max-width:900px){.hero__shade{background:linear-gradient(180deg,rgba(17,17,17,.55) 0,rgba(17,17,17,0) 20%)}}

/* v1.3.1: no line under the header */
.site-header,.has-hero .site-header:not(.is-solid),.site-header.is-solid{border-bottom:0}

/* v1.3.2: the sunset (sun on the right) stays visible on every screen */
@media (min-width:901px){
  .hero__media img{object-position:50% 100%}
}
@media (max-width:900px){
  .hero{padding-top:calc(min(100vw / 1.04,78svh) - 5.5rem)}
  .hero__media{height:min(100vw / 1.04,78svh)}
  .hero__media img{object-position:72% 50%;transform-origin:60% 40%}
}
@media (max-width:600px){
  .hero__media img{object-position:60% 50%}
}
@media (min-width:901px){
  /* keep the hero text clear of the header on short screens, and give the face more room */
  .hero{padding-top:calc(var(--header-h) + 1.5rem)}
  .hero__title{font-size:clamp(2.6rem,5.2vw,5.4rem)}
}
@media (max-width:600px){
  .hero{padding-top:calc(min(100vw / 1.18,78svh) - 5.5rem)}
  .hero__media{height:min(100vw / 1.18,78svh)}
  .hero__media img{object-position:50% 50%}
}

/* v1.4.1: short browser windows (laptops with toolbars) keep the whole hero, keyboard included, in view */
@media (min-width:901px) and (max-height:760px){
  .hero{padding-top:calc(var(--header-h) + .75rem)}
  .eyebrow{margin-bottom:.7rem}
  .hero__title{font-size:min(5.2vw,8vh);margin-bottom:.35em}
  .hero__text{font-size:.95rem;line-height:1.6;max-width:52ch;margin-bottom:1rem}
  .hero .btn{padding:.8rem 1.6rem}
  .hero__staff{height:56px}
  .hero__keys{height:78px;margin-top:.4rem}
  .hero__hint{bottom:calc(78px + 56px + 1rem)}
  .hero__content{padding-bottom:.4rem}
}

/* v1.5: Instagram grid at the bottom of the home page */
.insta{background:linear-gradient(180deg,#15110a 0%,var(--black) 100%);border-top:1px solid rgba(184,154,80,.25)}
.insta__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:2.4rem}
.insta__head .h2{margin-bottom:.3em}
.insta__handle{margin:0;font-family:var(--display);font-size:1.5rem;letter-spacing:.03em}
.insta__handle a{text-decoration:none}
.insta__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.insta__grid li{position:relative;aspect-ratio:1;overflow:hidden;background:#201b11}
.insta__grid a{display:block;width:100%;height:100%;position:relative}
.insta__grid img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .5s}
.insta__grid a:hover img,.insta__grid a:focus-visible img{transform:scale(1.07);filter:brightness(.5)}
.insta__over{position:absolute;inset:0;display:grid;place-items:center;color:var(--white);opacity:0;transition:opacity .4s}
.insta__grid a:hover .insta__over,.insta__grid a:focus-visible .insta__over{opacity:1}
.insta__play{position:absolute;top:.7rem;right:.7rem;width:26px;height:26px;color:#fff;filter:drop-shadow(0 1px 4px rgba(0,0,0,.6))}
@media (max-width:640px){.insta__grid{grid-template-columns:repeat(2,1fr);gap:6px}.insta__head .btn{width:100%}}

/* v1.6: home video block under the hero */
.showreel{position:relative;overflow:hidden;background:radial-gradient(70% 60% at 50% 0%,rgba(184,154,80,.2),transparent 70%),var(--black);padding-block:clamp(4rem,8vw,7rem)}
.showreel::before{content:"";position:absolute;right:-8%;bottom:-18%;width:min(46vw,560px);aspect-ratio:1;background:url(../logo/AM_Logo_Gold_ICO.svg) center/contain no-repeat;opacity:.07;pointer-events:none}
.showreel>.wrap{position:relative}
.showreel__head{text-align:center;max-width:46rem;margin:0 auto 3rem}
.showreel__head .eyebrow{justify-content:center}
.showreel__head .eyebrow::after{content:"";width:44px;height:1px;background:var(--gold)}
.showreel__head .h2{margin-bottom:.4em}
.showreel__head .h2::after{margin-inline:auto;background:linear-gradient(90deg,rgba(184,154,80,0),var(--gold),rgba(184,154,80,0))}
.showreel__lead{margin:1rem auto 0;max-width:40ch;color:rgba(255,255,255,.88)}
.showreel__frame{position:relative;isolation:isolate;max-width:1060px;margin:0 auto;aspect-ratio:16/9;background:#000;box-shadow:0 30px 80px -20px rgba(0,0,0,.8),0 0 120px rgba(184,154,80,.14)}
.showreel__frame::before{content:"";position:absolute;inset:0;border:1px solid var(--gold);transform:translate(16px,16px);z-index:-1;transition:transform .7s var(--ease)}
.showreel__frame:hover::before{transform:translate(8px,8px)}
.showreel__media{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.showreel__media--yt{position:relative}
.showreel__media--yt img{width:100%;height:100%;object-fit:cover}
.showreel__media--yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.showreel__frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.1),rgba(17,17,17,.55));pointer-events:none;transition:opacity .5s}
.showreel__play{position:absolute;left:50%;top:50%;z-index:2;width:104px;height:104px;margin:-52px 0 0 -52px;display:grid;place-items:center;padding:0;border:1px solid var(--gold);border-radius:50%;background:rgba(17,17,17,.62);color:var(--gold-hi);cursor:pointer;backdrop-filter:blur(4px);transition:transform .45s var(--ease),background .3s,color .3s}
.showreel__play svg{margin-left:4px}
.showreel__ring{position:absolute;inset:-1px;border-radius:50%;animation:waPulse 2.8s ease-out infinite;pointer-events:none}
.showreel__play:hover,.showreel__play:focus-visible{background:var(--gold);color:var(--black);transform:scale(1.08)}
.showreel__time{position:absolute;right:1rem;bottom:1rem;z-index:2;padding:.3rem .8rem;border:1px solid rgba(184,154,80,.6);border-radius:999px;background:rgba(17,17,17,.7);color:var(--gold-hi);font-size:.8rem;letter-spacing:.1em}
.showreel__frame.is-playing::after,.showreel__frame.is-playing .showreel__play,.showreel__frame.is-playing .showreel__time{opacity:0;pointer-events:none}
@media (max-width:640px){.showreel__frame::before{transform:translate(8px,8px)}.showreel__play{width:80px;height:80px;margin:-40px 0 0 -40px}}
@media (prefers-reduced-motion:reduce){.showreel__ring{animation:none}}