/* ============================================================
   StackaWraps® Studios — Showreel app
   Art direction: midnight navy, electric pink → cyan, brush marks
   ============================================================ */

:root{
  --navy-900:#050A1A;
  --navy-850:#070E24;
  --navy-800:#0A1230;
  --navy-700:#111C42;

  --ink:#FFFFFF;
  --muted:#9EAFD4;
  --muted-dim:#7183AC;

  --pink:#FF2E88;
  --magenta:#D6209B;
  --purple:#7C4DFF;
  --blue:#2F7DFF;
  --cyan:#22D6F2;
  --orange:#FF7A18;

  --shell:46rem;                             /* 736px premium app column */
  --pad:clamp(1.05rem, 5vw, 2.25rem);
  --radius:clamp(16px, 4.4vw, 26px);
  --gap-section:clamp(2.1rem, 8vw, 3.4rem);
  --shell-top:clamp(1.6rem, 6vw, 3rem);

  --font-display:"Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-script:"Kaushan Script", "Snell Roundhand", cursive;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--navy-900);
}

body{
  margin:0;
  min-height:100svh;
  font-family:var(--font-display);
  color:var(--ink);
  background:transparent;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}

/* the fixed deep-space wash sitting behind everything */
body::before{
  content:"";
  position:fixed;
  inset:-10%;
  z-index:-2;
  background:
    radial-gradient(120% 70% at 50% -10%, #101B44 0%, transparent 60%),
    radial-gradient(90% 60% at 100% 100%, #0C1B3A 0%, transparent 65%),
    linear-gradient(170deg, #070D22 0%, #050A1A 45%, #060C20 100%);
  background-size:180% 180%, 180% 180%, 100% 100%;
  animation:wash 46s ease-in-out infinite alternate;
}
@keyframes wash{
  0%{background-position:0% 0%, 100% 100%, 0 0}
  100%{background-position:60% 40%, 30% 60%, 0 0}
}

img,svg{display:block;max-width:100%}
sup{font-size:.42em;vertical-align:super;line-height:0}

::selection{background:var(--pink);color:#fff}

:where(a,button):focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:4px;
  border-radius:6px;
}

/* ============================================================
   Ambient artwork
   ============================================================ */
.ambient{
  position:fixed;
  inset:0;
  z-index:-1;
  overflow:hidden;
  pointer-events:none;
  contain:paint;
}

.blob{
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  will-change:transform;
}
.blob--pink{
  width:78vmin;height:78vmin;
  top:-30vmin;left:-30vmin;
  background:radial-gradient(circle at 40% 40%, rgba(255,46,136,.55), rgba(214,32,155,.12) 60%, transparent 72%);
  animation:drift-a 34s ease-in-out infinite alternate;
}
.blob--cyan{
  width:70vmin;height:70vmin;
  top:-22vmin;right:-28vmin;
  background:radial-gradient(circle at 55% 45%, rgba(34,214,242,.42), rgba(47,125,255,.12) 60%, transparent 74%);
  animation:drift-b 41s ease-in-out infinite alternate;
}
.blob--purple{
  width:62vmin;height:62vmin;
  top:34%;right:-30vmin;
  background:radial-gradient(circle at 50% 50%, rgba(124,77,255,.34), transparent 70%);
  animation:drift-a 52s ease-in-out infinite alternate-reverse;
}
.blob--orange{
  width:66vmin;height:66vmin;
  bottom:-28vmin;left:-26vmin;
  background:radial-gradient(circle at 50% 50%, rgba(255,122,24,.30), rgba(255,46,136,.16) 55%, transparent 72%);
  animation:drift-b 47s ease-in-out infinite alternate;
}
@keyframes drift-a{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(4vmin,5vmin,0) scale(1.09)}
}
@keyframes drift-b{
  0%{transform:translate3d(0,0,0) scale(1.04)}
  100%{transform:translate3d(-5vmin,3vmin,0) scale(.95)}
}

/* the big teal arc slicing the top-right corner */
.arc{
  position:absolute;
  top:-34vmin;right:-30vmin;
  width:86vmin;height:86vmin;
  border-radius:50%;
  background:conic-gradient(from 148deg, transparent 0 3%, rgba(34,214,242,.5) 13%, rgba(47,125,255,.26) 27%, rgba(47,125,255,.08) 40%, transparent 52%);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 9vmin), #000 calc(100% - 8.6vmin));
          mask:radial-gradient(farthest-side, transparent calc(100% - 9vmin), #000 calc(100% - 8.6vmin));
  opacity:.4;
  animation:turn 120s linear infinite;
}

/* brush strokes, drawn as raked stripes fading into the dark */
.brush{
  position:absolute;
  opacity:.34;
  background-image:
    repeating-linear-gradient(74deg,
      currentColor 0 1.5px, transparent 1.5px 8px),
    repeating-linear-gradient(69deg,
      currentColor 0 3px, transparent 3px 23px);
  -webkit-mask-image:radial-gradient(54% 48% at 50% 50%, #000 4%, rgba(0,0,0,.45) 38%, transparent 66%);
          mask-image:radial-gradient(54% 48% at 50% 50%, #000 4%, rgba(0,0,0,.45) 38%, transparent 66%);
}
.brush--tl{
  color:var(--pink);
  width:62vmin;height:52vmin;
  top:-6vmin;left:-16vmin;
  transform:rotate(-6deg);
  animation:sway 30s ease-in-out infinite alternate;
}
.brush--tr{
  color:var(--purple);
  width:48vmin;height:56vmin;
  top:2vmin;right:-16vmin;
  transform:rotate(14deg) scaleX(-1);
  opacity:.26;
  animation:sway 38s ease-in-out infinite alternate-reverse;
}
.brush--bl{
  color:var(--magenta);
  width:56vmin;height:46vmin;
  bottom:-8vmin;left:-18vmin;
  transform:rotate(8deg);
  opacity:.28;
  animation:sway 44s ease-in-out infinite alternate;
}
@keyframes sway{
  0%{translate:0 0}
  100%{translate:1.4vmin -1.8vmin}
}

/* drifting flecks, the orange spray from the artwork */
.dust i{
  position:absolute;
  width:3px;height:3px;
  border-radius:1px;
  background:var(--orange);
  opacity:0;
  animation:float 26s linear infinite;
}
.dust i:nth-child(1) {left:26%;top:6%;  animation-delay:-2s;  animation-duration:30s}
.dust i:nth-child(2) {left:31%;top:12%; animation-delay:-9s;  background:var(--pink)}
.dust i:nth-child(3) {left:36%;top:3%;  animation-delay:-14s; animation-duration:34s}
.dust i:nth-child(4) {left:22%;top:17%; animation-delay:-5s;  background:var(--pink)}
.dust i:nth-child(5) {left:41%;top:9%;  animation-delay:-19s}
.dust i:nth-child(6) {left:12%;top:26%; animation-delay:-23s; animation-duration:38s}
.dust i:nth-child(7) {left:78%;top:14%; animation-delay:-7s;  background:var(--cyan)}
.dust i:nth-child(8) {left:86%;top:31%; animation-delay:-16s; background:var(--cyan);animation-duration:33s}
.dust i:nth-child(9) {left:8%; top:72%; animation-delay:-11s}
.dust i:nth-child(10){left:15%;top:83%; animation-delay:-21s; background:var(--pink)}
.dust i:nth-child(11){left:90%;top:66%; animation-delay:-3s;  background:var(--purple)}
.dust i:nth-child(12){left:69%;top:88%; animation-delay:-27s; animation-duration:36s}
@keyframes float{
  0%  {opacity:0;   transform:translate3d(0,10px,0)}
  12% {opacity:.85}
  70% {opacity:.5}
  100%{opacity:0;   transform:translate3d(-14px,-90px,0)}
}
@keyframes turn{to{rotate:360deg}}

/* ============================================================
   Layout shell
   ============================================================ */
.shell{
  position:relative;
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-left:max(var(--pad), env(safe-area-inset-left));
  padding-right:max(var(--pad), env(safe-area-inset-right));
  padding-top:calc(env(safe-area-inset-top) + var(--shell-top));
  padding-bottom:calc(env(safe-area-inset-bottom) + clamp(2rem, 8vw, 3.5rem));
}

/* ============================================================
   1. Hero
   ============================================================ */
.hero{text-align:center}

.brand{
  position:relative;
  margin:0;
  line-height:0;
  /* bleed past the shell padding and up under the status bar so the
     artwork meets the screen edges — no rectangle, no seams */
  margin-top:calc(-1 * (env(safe-area-inset-top) + var(--shell-top) + 1px));
  margin-inline:calc(50% - 50vw);
  margin-bottom:clamp(-5rem, -13vw, -1.5rem);
  display:flex;
  justify-content:center;
}
.brand picture{display:block;width:100%;text-align:center}
.brand__art{
  width:100%;
  max-width:min(100%, 66rem);
  height:auto;
  margin-inline:auto;
  display:block;
  filter:drop-shadow(0 22px 50px rgba(2,5,16,.5));
}

.tagline{
  margin:clamp(.9rem, 3.6vw, 1.5rem) 0 0;
  font-size:clamp(.72rem, 3.35vw, 1.1rem);
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:#EAF0FF;
}
.tagline b{color:var(--pink);font-weight:600}

/* SHOWREEL — the signature wordmark, its O is the play control */
.showreel{
  margin:clamp(.75rem, 3.2vw, 1.35rem) 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.01em;
  font-size:clamp(2.4rem, 13.2vw, 5.6rem);
  font-weight:900;
  letter-spacing:.005em;
  line-height:1;
}
.showreel__txt{
  background:linear-gradient(180deg,#fff 42%, #B9C6E8 100%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.showreel__o{
  position:relative;
  z-index:0;
  display:inline-block;
  width:.86em;height:.86em;
  margin:0 .015em;
  border-radius:50%;
  flex:0 0 auto;
}
.showreel__o::before{                      /* gradient ring */
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  padding:.093em;
  background:conic-gradient(from 210deg, var(--pink), var(--orange) 32%, var(--magenta) 62%, var(--purple) 82%, var(--pink));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:turn 14s linear infinite;
}
.showreel__o::after{                       /* soft halo pulse */
  content:"";
  position:absolute;
  inset:-6%;
  border-radius:50%;
  box-shadow:0 0 22px rgba(255,46,136,.55);
  opacity:.55;
  animation:halo 3.4s ease-in-out infinite;
}
.showreel__o svg{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  fill:#fff;
}
@keyframes halo{
  0%,100%{opacity:.34;transform:scale(.97)}
  50%    {opacity:.72;transform:scale(1.03)}
}

.subhead{
  margin:clamp(.5rem, 2.4vw, .9rem) 0 0;
  font-size:clamp(.7rem, 3.2vw, 1.02rem);
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#D5DEF7;
}

/* ============================================================
   2. The player
   ============================================================ */
.stage{
  position:relative;
  margin-top:clamp(1.5rem, 6vw, 2.4rem);
}

.player{position:relative}

.player__aura{
  position:absolute;
  inset:-3%;
  border-radius:calc(var(--radius) + 14px);
  background:linear-gradient(118deg, var(--pink), var(--magenta) 30%, var(--purple) 58%, var(--cyan));
  filter:blur(30px);
  opacity:.34;
  z-index:0;
  animation:breathe 9s ease-in-out infinite alternate;
  will-change:opacity, transform;
}
@keyframes breathe{
  0%  {opacity:.24;transform:scale(.985)}
  100%{opacity:.5; transform:scale(1.015)}
}

.player__frame{
  position:relative;
  z-index:1;
  padding:clamp(7px, 1.9vw, 12px);
  border-radius:var(--radius);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
.player__border{                            /* travelling neon perimeter */
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  overflow:hidden;
}
.player__border::before{
  content:"";
  position:absolute;
  top:50%;left:50%;
  width:190%;
  aspect-ratio:1;
  translate:-50% -50%;
  background:conic-gradient(var(--pink), var(--magenta) 18%, var(--purple) 40%, var(--blue) 62%, var(--cyan) 78%, var(--pink));
  animation:turn 11s linear infinite;
}
.player__border::after{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:calc(var(--radius) - 2px);
  background:rgba(6,11,30,.94);
}

.player__screen{
  position:relative;
  z-index:1;
  aspect-ratio:16 / 9;
  width:100%;
  border-radius:calc(var(--radius) - 9px);
  overflow:hidden;
  background:#04070F;
  isolation:isolate;
}
@supports not (aspect-ratio:16/9){
  .player__screen{height:0;padding-bottom:56.25%}
}
.player__screen iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
  opacity:0;
  transition:opacity .5s ease;
}
.player__screen iframe.is-ready{opacity:1}

.poster{
  position:absolute;
  inset:0;
  background-color:#0A1330;
  background-image:
    radial-gradient(80% 70% at 30% 25%, rgba(124,77,255,.34), transparent 60%),
    radial-gradient(70% 80% at 78% 80%, rgba(34,214,242,.24), transparent 62%),
    linear-gradient(150deg,#101A3E,#06091A);
  background-size:cover;
  background-position:center;
  transition:opacity .45s ease, transform .6s ease;
}
.poster.has-frame{
  background-image:var(--frame);
}
.poster__veil{
  position:absolute;
  inset:0;
  background:
    radial-gradient(58% 58% at 50% 50%, rgba(4,7,15,.14), rgba(4,7,15,.62) 100%),
    linear-gradient(180deg, rgba(4,7,15,.32), transparent 32%, rgba(4,7,15,.55));
  transition:opacity .45s ease;
}

/* play affordance */
.play{
  position:absolute;
  top:50%;left:50%;
  translate:-50% -50%;
  width:clamp(62px, 19%, 104px);
  aspect-ratio:1;
  padding:0;
  border:0;
  border-radius:50%;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.2), opacity .4s ease;
}
.play::before{                              /* pink→orange gradient ring */
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  padding:4px;
  background:conic-gradient(from 200deg, var(--pink), var(--orange) 34%, var(--magenta) 66%, var(--pink));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  animation:turn 9s linear infinite;
}
.play::after{                               /* slow sonar pulse */
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(255,46,136,.42);
  animation:sonar 3.6s ease-out infinite;
}
@keyframes sonar{
  0%  {box-shadow:0 0 0 0 rgba(255,46,136,.42)}
  70% {box-shadow:0 0 0 22px rgba(255,46,136,0)}
  100%{box-shadow:0 0 0 0 rgba(255,46,136,0)}
}
.play__disc{
  position:absolute;
  inset:4px;
  border-radius:50%;
  background:rgba(8,13,34,.42);
  -webkit-backdrop-filter:blur(3px);
          backdrop-filter:blur(3px);
}
.play__tri{
  position:absolute;
  top:50%;left:53%;
  translate:-50% -50%;
  width:38%;
  fill:#fff;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.play:hover{transform:translate(-50%,-50%) scale(1.06)}
.play:active{transform:translate(-50%,-50%) scale(.95)}

.stamp{
  position:absolute;
  left:clamp(10px,3%,18px);
  bottom:clamp(10px,3%,18px);
  padding:.42em .78em;
  border-radius:99px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(6,10,26,.5);
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  font-size:clamp(.55rem, 2.2vw, .72rem);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#E7EDFF;
  transition:opacity .35s ease;
}
.stamp b{color:var(--pink)}

/* once the film is in, the frame gets out of the way */
.is-live .poster,
.is-live .poster__veil,
.is-live .play,
.is-live .stamp{opacity:0;pointer-events:none}
.is-live .play{visibility:hidden}

.is-playing .player__aura{opacity:.2;animation-duration:20s}
.is-playing .player__border::before{animation-duration:26s}
.is-playing .ambient{opacity:.55;transition:opacity 1.2s ease}

/* decorative hash marks flanking the player — desktop only, never overflow */
.ticks{display:none}
@media (min-width:900px){
  .ticks{
    display:block;
    position:absolute;
    top:14%;
    width:34px;height:44%;
    background-image:repeating-linear-gradient(66deg, currentColor 0 2px, transparent 2px 9px);
    -webkit-mask-image:linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
            mask-image:linear-gradient(180deg, transparent, #000 28%, #000 72%, transparent);
    opacity:.55;
  }
  .ticks--left {left:calc(-34px - 2.4rem); color:var(--pink)}
  .ticks--right{right:calc(-34px - 2.4rem); color:var(--purple); transform:scaleX(-1)}
}

/* ============================================================
   3. Capabilities
   ============================================================ */
.caps{
  margin-top:var(--gap-section);
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:clamp(.2rem, 1.6vw, 1rem);
}
.cap{
  position:relative;
  text-align:center;
  padding:0 clamp(.1rem, 1.4vw, .6rem);
}
.cap + .cap::before{
  content:"";
  position:absolute;
  left:calc(-1 * clamp(.1rem, .8vw, .5rem));
  top:8%;bottom:8%;
  width:1px;
  background:linear-gradient(180deg, transparent, rgba(255,255,255,.18), transparent);
}
.cap__icon{
  width:clamp(30px, 9.6vw, 48px);
  height:auto;
  margin:0 auto clamp(.5rem, 2.2vw, .8rem);
  fill:none;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.cap__icon--pink  {stroke:var(--pink);   filter:drop-shadow(0 0 10px rgba(255,46,136,.4))}
.cap__icon--cyan  {stroke:var(--cyan);   filter:drop-shadow(0 0 10px rgba(34,214,242,.35))}
.cap__icon--orange{stroke:var(--orange); filter:drop-shadow(0 0 10px rgba(255,122,24,.35))}
.cap__icon--purple{stroke:var(--purple); filter:drop-shadow(0 0 10px rgba(124,77,255,.4))}
.cap__label{
  margin:0;
  font-size:clamp(.58rem, 2.5vw, .86rem);
  font-weight:700;
  line-height:1.34;
  letter-spacing:.035em;
  text-transform:uppercase;
  color:#E4EAFB;
}

@media (max-width:420px){
  .cap{padding:0 1px}
  .cap__label{font-size:.56rem;letter-spacing:.02em}
}

/* ============================================================
   4. Brand statement
   ============================================================ */
.statement{
  margin-top:var(--gap-section);
  text-align:center;
}
.statement__a,
.statement__b{
  margin:0;
  font-weight:800;
  line-height:1.12;
  letter-spacing:-.012em;
  text-transform:uppercase;
  font-size:clamp(1.35rem, 6.5vw, 2.9rem);
  text-wrap:balance;
}
.statement__a{color:#fff}
.statement__b{
  margin-top:.12em;
  background:linear-gradient(96deg, var(--pink) 4%, var(--orange) 26%, var(--purple) 52%, var(--blue) 74%, var(--cyan) 96%);
  background-size:180% 100%;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  animation:sweep 14s ease-in-out infinite alternate;
}
@keyframes sweep{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

/* ============================================================
   5. Call to action
   ============================================================ */
.cta{
  margin-top:clamp(1.6rem, 6vw, 2.6rem);
  display:flex;
  justify-content:center;
}
.cta__btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.75em;
  min-height:56px;
  padding:.95em clamp(1.6rem, 7vw, 3rem);
  border:2px solid transparent;
  border-radius:99px;
  background:
    linear-gradient(#080F26,#080F26) padding-box,
    linear-gradient(96deg, var(--pink), var(--orange) 28%, var(--purple) 58%, var(--cyan)) border-box;
  background-size:100% 100%, 220% 100%;
  animation:sweep 7s ease-in-out infinite alternate;
  font-size:clamp(.92rem, 4.1vw, 1.25rem);
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#fff;
  text-decoration:none;
  box-shadow:0 10px 34px rgba(255,46,136,.2), 0 0 0 rgba(34,214,242,0);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.2), box-shadow .35s ease;
}
.cta__btn::after{                            /* halo that swells on touch */
  content:"";
  position:absolute;
  inset:-3px;
  border-radius:99px;
  background:linear-gradient(96deg, var(--pink), var(--purple) 55%, var(--cyan));
  filter:blur(16px);
  opacity:.3;
  z-index:-1;
  transition:opacity .35s ease;
}
.cta__btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 44px rgba(255,46,136,.34), 0 0 34px rgba(34,214,242,.18);
}
.cta__btn:hover::after{opacity:.62}
.cta__btn:active{transform:translateY(0) scale(.975)}
.cta__icon{
  width:1.15em;height:1.15em;
  fill:none;
  stroke:#fff;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .3s ease;
}
.cta__btn:hover .cta__icon{transform:translate(3px,-3px)}

/* ============================================================
   Footer
   ============================================================ */
.site-foot{
  margin-top:clamp(1.4rem, 5vw, 2rem);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(.5rem, 3vw, 1.4rem);
}
.site-foot__link{
  display:inline-flex;
  align-items:center;
  gap:.55em;
  font-size:clamp(.72rem, 3.1vw, .92rem);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--muted);
  text-decoration:none;
  transition:color .25s ease;
}
.site-foot__link svg{
  width:1.15em;height:1.15em;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.85;
}
.site-foot__link:hover{color:#fff}
.site-foot__rule{
  width:1px;
  height:1.1em;
  background:rgba(255,255,255,.2);
}
.legalese{
  margin:clamp(1.2rem, 5vw, 2rem) 0 0;
  text-align:center;
  font-size:.62rem;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted-dim);
  opacity:.7;
}

/* ============================================================
   Entrance choreography
   ============================================================ */
.js .reveal{
  opacity:0;
  transform:translateY(16px);
}
.js .reveal.in{
  opacity:1;
  transform:none;
  transition:opacity .75s cubic-bezier(.22,.7,.3,1) var(--d,0ms),
             transform .75s cubic-bezier(.22,.7,.3,1) var(--d,0ms);
}
/* without JS nothing ever stays invisible */

/* ============================================================
   Larger screens — present the app, don't stretch it
   ============================================================ */
@media (min-width:820px){
  :root{--shell:48rem; --shell-top:clamp(2.4rem, 5vw, 4rem)}
  .brand{margin-bottom:clamp(-10rem, -9vw, -3rem)}
}
@media (min-width:1200px){
  :root{--shell:52rem}
}
@media (min-width:900px) and (max-height:620px){
  :root{--shell:40rem}
}

/* Landscape phones: keep the film in view */
@media (max-height:520px) and (orientation:landscape){
  :root{--shell:34rem}
  .brand__art{max-width:min(100%, 30rem)}
  .brand{margin-bottom:clamp(-3rem, -7vw, -1rem)}
  .showreel{font-size:clamp(1.9rem,7vw,3rem)}
}

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation:none !important;
    transition-duration:.01ms !important;
  }
  .js .reveal{opacity:1;transform:none}
  .player__border::before{background:linear-gradient(120deg,var(--pink),var(--purple) 45%,var(--cyan))}
}