/* Homepage showreel v2: no frame. Each effect floats on the hero ground; edges feather out with a radial mask. */
.hero-reel{display:block}
.reel-stage{position:absolute;inset:0;overflow:visible}
.reel-slide{position:absolute;inset:4% 0 12%;margin:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%)}
.reel-slide img,.reel-slide .reel-live{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;border:0;background:transparent}
.reel-slide .reel-live{opacity:0;transition:opacity .45s ease}
.reel-slide .reel-live.on{opacity:1}
.reel-slide.is-live img{opacity:0;transition:opacity .45s ease .1s}
.reel-slide .reel-live>*{width:100%!important;height:100%!important;display:block}
/* Psychedelic Flow is a field, so it gets an organic, slowly breathing blob mask instead of the soft circle. */
.reel-blob{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' d='M100 18c26 0 52 9 66 32s12 50 4 74-27 49-56 56-60-2-79-24S9 106 17 80 47 28 70 21c10-2 20-3 30-3z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='b'%3E%3CfeGaussianBlur stdDeviation='5'/%3E%3C/filter%3E%3Cpath filter='url(%23b)' d='M100 18c26 0 52 9 66 32s12 50 4 74-27 49-56 56-60-2-79-24S9 106 17 80 47 28 70 21c10-2 20-3 30-3z'/%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;inset:8% 6% 15%}
.js-reel .reel-blob.is-active{animation:reel-in var(--fade,1.2s) cubic-bezier(.5,0,.2,1) both,reel-breathe 9s ease-in-out infinite alternate}
@keyframes reel-breathe{to{transform:rotate(8deg) scale(1.03)}}
.reel-slide figcaption{display:none}
/* Dissolve: incoming shape condenses out of a blur; outgoing one swells and evaporates. */
.js-reel .reel-slide{display:none}
.js-reel .reel-slide.is-next{display:block;visibility:hidden}
.js-reel .reel-slide.is-active{display:block;z-index:2;animation:reel-in var(--fade,1.2s) cubic-bezier(.5,0,.2,1) both}
.js-reel .reel-slide.is-leaving{display:block;z-index:1;animation:reel-out var(--fade,1.2s) cubic-bezier(.5,0,.6,1) both}
@keyframes reel-in{from{opacity:0;transform:scale(.86);filter:blur(18px)}60%{opacity:1}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes reel-out{from{opacity:1;transform:none;filter:blur(0)}to{opacity:0;transform:scale(1.12);filter:blur(22px)}}
.hero-reel.paused .reel-slide.is-active{animation-play-state:paused}
.reel-caption{bottom:24px;z-index:3}
.reel-caption a{color:#babdae;display:inline-flex;gap:8px;align-items:baseline}
.reel-caption a b{font-weight:400;color:var(--paper,#f4f0e8)}
.reel-caption a span{color:var(--acid,#c8f04a)}
.reel-caption a:hover b{color:var(--acid,#c8f04a)}
.reel-status:empty{display:none}
.reel-status{color:#868a7b}
/* Static collage (no JS / reduced motion): the shapes scattered loosely across the same space, still no frames. */
.hero-reel:not(.js-reel) .reel-stage{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;inset:30px 0 60px}
.hero-reel:not(.js-reel) .reel-slide{position:relative;inset:auto}
@media (prefers-reduced-motion:reduce){
  .js-reel .reel-stage{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;inset:30px 0 60px}
  .js-reel .reel-slide,.js-reel .reel-slide.is-active,.js-reel .reel-slide.is-leaving,.js-reel .reel-slide.is-next{display:block;position:relative;inset:auto;visibility:visible;animation:none;opacity:1;transform:none;filter:none}
  .reel-slide .reel-live{display:none!important}
  .reel-caption [data-reel-link]{display:none}
  .reel-caption .reel-status::before{content:'NINE EFFECTS FROM THE STUDIO '}
}
@media(max-width:700px){.js-reel .reel-slide.is-active img{animation:reel-drift 7s ease-out both}}
@keyframes reel-drift{from{transform:scale(1.06) rotate(-1.5deg)}to{transform:none}}