/* Selected module colour reflected behind the product and around its glass rim. */
@property --ambient-a { syntax:"<color>"; inherits:true; initial-value:#9b73d7; }
@property --ambient-b { syntax:"<color>"; inherits:true; initial-value:#ba7dda; }
.hero-ambience { display:none; }
:root[data-hero-ambience="glass"] body[data-intro="a"] .film {
  background:linear-gradient(180deg,#f6f7fc 0%,#f1f0fa 78%,#f6f7fc 100%);
  transition:--ambient-a .7s ease,--ambient-b .7s ease;
}
:root[data-hero-ambience="glass"] .hero-ambience {
  display:block;position:absolute;inset:180px 0 0;overflow:hidden;
  pointer-events:none;z-index:0;
  mask-image:linear-gradient(transparent,#000 28%,#000 75%,transparent);
}
.hero-ambience i {position:absolute;width:72%;height:90%;top:8%;border-radius:50%;will-change:transform;}
.hero-ambience i:first-child {
  left:-30%;background:radial-gradient(ellipse,color-mix(in srgb,var(--ambient-a) 23%,transparent),transparent 68%);
  animation:hero-ambient-drift 18s ease-in-out infinite alternate;
}
.hero-ambience i:last-child {
  right:-28%;top:18%;background:radial-gradient(ellipse,color-mix(in srgb,var(--ambient-b) 25%,transparent),transparent 68%);
  animation:hero-ambient-drift 20s ease-in-out -8s infinite alternate-reverse;
}
@keyframes hero-ambient-drift {from{transform:translate3d(-3%,-4%,0) scale(.95)}to{transform:translate3d(12%,8%,0) scale(1.1)}}
:root[data-motion="paused"] .hero-ambience i,
.film[data-ambience-running="false"] .hero-ambience i {animation-play-state:paused;}
@media(max-width:600px){:root[data-hero-ambience="glass"] .hero-ambience{inset:230px 0 0}.hero-ambience i{width:100%;}}
@media(prefers-reduced-motion:reduce){
  .hero-ambience i{animation:none;will-change:auto;}
  :root[data-hero-ambience="glass"] body[data-intro="a"] .film{transition:none;}
}

/* Original module palette reflected in glass; brief sweep then six seconds rest. */
:root[data-hero-ambience="glass"] .browser {position:relative;}
.hero-rim {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible;}
.hero-rim rect {fill:none;stroke:url(#rim-colour);stroke-width:1;stroke-linecap:round;stroke-dasharray:12 88;filter:drop-shadow(0 0 3px var(--ambient-a));animation:hero-rim-sweep 10s linear infinite;}
@keyframes hero-rim-sweep {
  0%{stroke-dashoffset:0;opacity:0}
  3%{opacity:.95}
  37%{opacity:.95}
  42%{stroke-dashoffset:-100;opacity:0}
  100%{stroke-dashoffset:-100;opacity:0}
}
:root[data-ambience-running="false"] .hero-rim rect {animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.hero-rim rect{animation:none;opacity:.35;stroke-dasharray:none;filter:none}}

/* Soft light beneath the fine stroke, following the same sweep and rest. */
.hero-rim .hero-rim-glow {stroke-width:4;filter:blur(3px);}
.hero-rim .hero-rim-core {filter:drop-shadow(0 0 3px var(--ambient-a)) drop-shadow(0 0 7px var(--ambient-b));}
@media(prefers-reduced-motion:reduce){.hero-rim .hero-rim-glow{display:none}.hero-rim .hero-rim-core{filter:none}}

/* Approved delicate halo keeps the one-pixel core crisp. */
:root[data-hero-glow="delicate"] .hero-rim .hero-rim-glow {stroke-width:3;stroke-opacity:.35;filter:blur(2.5px);}
:root[data-hero-glow="delicate"] .hero-rim .hero-rim-core {filter:drop-shadow(0 0 2px color-mix(in srgb,var(--ambient-a) 45%,transparent));}
@media(prefers-reduced-motion:reduce){:root[data-hero-glow="delicate"] .hero-rim .hero-rim-core{filter:none}}