/* Authored marketing decoration. These curves never represent measured motion. */
.marketing-kinetic-ribbon,
.marketing-kinetic-underline {
  display: block;
  position: relative;
  flex: none;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}

.marketing-kinetic-ribbon {
  width: var(--marketing-ribbon-width, min(100%, 840px));
  aspect-ratio: 1000 / 320;
  --marketing-motion-duration: 960ms;
}

.marketing-kinetic-underline {
  width: var(--marketing-underline-width, 100%);
  aspect-ratio: 500 / 50;
  --marketing-motion-duration: 720ms;
}

.marketing-kinetic-ribbon::before,
.marketing-kinetic-underline::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--marketing-line-paint, linear-gradient(105deg, #7bd7fb 0%, #dff6ff 62%, #b9c6f3 100%));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

.marketing-kinetic-ribbon::before {
  -webkit-mask-image: url("assets/marketing-layers/turn-ribbon.svg");
  mask-image: url("assets/marketing-layers/turn-ribbon.svg");
}

.marketing-kinetic-underline::before {
  -webkit-mask-image: url("assets/marketing-layers/learning-underline.svg");
  mask-image: url("assets/marketing-layers/learning-underline.svg");
}

/* Both authored curves move monotonically left to right, so this reveal
   follows their direction without fabricating a measured path or a tracer. */
@media (prefers-reduced-motion: no-preference) {
  .marketing-kinetic-ribbon[data-motion-visible="false"]::before,
  .marketing-kinetic-underline[data-motion-visible="false"]::before {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }

  .marketing-kinetic-ribbon[data-motion-visible="true"]::before,
  .marketing-kinetic-underline[data-motion-visible="true"]::before {
    transition:
      clip-path var(--marketing-motion-duration, 840ms) cubic-bezier(.28, .6, .32, 1) var(--marketing-motion-delay, 0ms),
      opacity 180ms ease-out var(--marketing-motion-delay, 0ms);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marketing-kinetic-ribbon::before,
  .marketing-kinetic-underline::before {
    transition: none !important;
    clip-path: inset(0 0 0 0) !important;
    opacity: 1 !important;
  }
}

/* A continuous authored landscape. It never depicts measured skier data. */
.marketing-home #hsmr-demo[data-atmosphere-ready="true"]{
  position:relative;isolation:isolate;--marketing-scene-inset:64px;
}
.marketing-home [data-atmosphere-ready="true"] .marketing-alpine-layer,
.marketing-home [data-atmosphere-ready="true"] .marketing-snow-layer,
.marketing-home [data-atmosphere-ready="true"] .marketing-hero-copy>.marketing-kinetic-ribbon,
.marketing-home [data-atmosphere-ready="true"] .marketing-close>.marketing-kinetic-ribbon{display:none}
.marketing-home [data-atmosphere-ready="true"] .marketing-experience:before{background:none}
.marketing-atmosphere{
  position:absolute;top:0;bottom:0;left:calc(-1 * var(--marketing-scene-inset-left,var(--marketing-scene-inset)));right:calc(-1 * var(--marketing-scene-inset-right,var(--marketing-scene-inset)));
  z-index:-1;pointer-events:none;user-select:none;overflow:clip;contain:paint;
  --scene-capture:1;--scene-accumulation:0;--scene-feedback:0;
  --scene-pan-x:0px;--scene-pan-y:0px;--scene-contour-y:0px;
  --scene-route-progress:0;--scene-signal-progress:0;--scene-horizon:0;
}
.marketing-atmosphere-viewport{
  position:sticky;top:var(--marketing-brand-height,76px);
  height:calc(100vh - var(--marketing-brand-height,76px));height:calc(100svh - var(--marketing-brand-height,76px));
  overflow:clip;isolation:isolate;
  background:radial-gradient(ellipse at 5% 20%,#24495b55,transparent 63%),#111b26;
}
.marketing-atmosphere-viewport:before{
  content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(90deg,#111b2620 0%,#111b2690 20%,#111b26aa 62%,#111b2620),
    linear-gradient(180deg,#111b2600 52%,#111b2670 100%);
  opacity:calc(.6 + var(--scene-accumulation) * .34 + var(--scene-feedback) * .18);
}
.marketing-atmosphere-viewport:after{
  content:"";position:absolute;inset:0;z-index:3;
  background:radial-gradient(ellipse at 1% 75%,#41cffe10,transparent 44%),radial-gradient(ellipse at 100% 16%,#df94ff0a,transparent 38%);
  opacity:calc(.3 + var(--scene-accumulation) * .55 + var(--scene-feedback) * .45);
}
.marketing-atmosphere-photo{
  position:absolute;left:-40px;top:-40px;width:calc(100% + 80px);height:calc(100% + 80px);max-width:none;
  object-fit:cover;object-position:54% 54%;
  opacity:calc(.55 * var(--scene-capture) + .1 * var(--scene-accumulation) + .23 * var(--scene-feedback));
  transform:translate3d(var(--scene-pan-x),var(--scene-pan-y),0) scale(1.035);
  filter:saturate(.64);mask-image:linear-gradient(#000 75%,#0008);
}
.marketing-atmosphere-relief{
  position:absolute;left:-14%;top:-15%;width:128%;height:130%;max-width:none;
  transform:translate3d(calc(var(--scene-pan-x) * -.5),var(--scene-contour-y),0);
  opacity:calc(.15 * var(--scene-capture) + .36 * var(--scene-accumulation) + .2 * var(--scene-feedback));
  mask-image:linear-gradient(90deg,#000 0%,#0009 4%,#0002 12%,#0000 26%,#0000 75%,#0002 88%,#000a 97%,#000);
}
.marketing-atmosphere-relief path{fill:none;stroke:#8bb3c5;stroke-width:1;vector-effect:non-scaling-stroke}
.marketing-atmosphere-relief path:nth-child(4n){stroke:#c3dbe4;stroke-width:1.4;fill:#597e9208}
.marketing-atmosphere-traverse{
  position:absolute;left:-8%;top:9%;width:116%;height:95%;max-width:none;
  transform:translate3d(calc(var(--scene-pan-x) * .3),calc(var(--scene-contour-y) * -.25),0);
  opacity:calc(.4 * var(--scene-capture) + .22 * var(--scene-accumulation) + .48 * var(--scene-feedback));
  mask-image:linear-gradient(90deg,#000 0%,#000a 5%,#0002 14%,#0000 30%,#0000 72%,#0002 88%,#000 97%);
}
.marketing-atmosphere-route{fill:none;stroke:#9dd6ed;stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--scene-route-progress))}
.marketing-atmosphere-route:nth-child(2){stroke:#b7d0e5;stroke-width:1.2;opacity:.6}
.marketing-atmosphere-traverse path:nth-child(n+3){opacity:.24;stroke-width:.7}
.marketing-atmosphere-signals{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  transform:translate3d(0,calc(var(--scene-pan-y) * -.25),0);
  opacity:calc(var(--scene-signal-progress) * .48);
  mask-image:linear-gradient(90deg,#000 0%,#0000 13%,#0000 87%,#000 100%);
}
.marketing-atmosphere-signals path,.marketing-atmosphere-signals line{stroke:#9db8c9;stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.marketing-atmosphere-signals circle{stroke:#b7d2df;stroke-width:1;fill:#111b26}
.marketing-atmosphere-signals circle:nth-of-type(4n+1){stroke:#41CFFE}
.marketing-atmosphere-signals circle:nth-of-type(4n+2){stroke:#DF94FF}
.marketing-atmosphere-signals circle:nth-of-type(4n+3){stroke:#FFA666}
.marketing-atmosphere-signals circle:nth-of-type(4n){stroke:#D6C908}
.marketing-atmosphere-signal[data-signal-index="1"] circle{stroke:#DF94FF}
.marketing-atmosphere-signal[data-signal-index="2"] circle{stroke:#FFA666}
.marketing-atmosphere-signals .marketing-atmosphere-signal-dot{fill:#b7e5f7;stroke:none}
.marketing-atmosphere-powder{
  position:absolute;left:-16%;bottom:-18%;width:78%;height:auto;max-width:none;
  transform:translate3d(calc(var(--scene-pan-x) * -.5),calc(var(--scene-pan-y) * 1.4),0);
  opacity:calc(.13 * var(--scene-capture) + .035 * var(--scene-accumulation) + .12 * var(--scene-feedback));
  mask-image:radial-gradient(ellipse,#000 10%,transparent 66%);
}
.marketing-atmosphere-grain{
  position:absolute;inset:0;z-index:4;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
@media(min-width:901px) and (max-width:1200px){
 .marketing-home #hsmr-demo[data-atmosphere-ready="true"]{--marketing-scene-inset:40px}
}
@media(max-width:900px){
 .marketing-home #hsmr-demo[data-atmosphere-ready="true"]{--marketing-scene-inset-left:max(20px,env(safe-area-inset-left));--marketing-scene-inset-right:max(20px,env(safe-area-inset-right))}
 .marketing-atmosphere-photo{object-position:60% center;opacity:calc(.4 * var(--scene-capture) + .075 * var(--scene-accumulation) + .18 * var(--scene-feedback))}
 .marketing-atmosphere-relief{left:-60%;width:220%;opacity:calc(.1 * var(--scene-capture) + .25 * var(--scene-accumulation) + .15 * var(--scene-feedback))}
 .marketing-atmosphere-relief path{display:none}
 .marketing-atmosphere-relief path:nth-child(7n+1){display:block}
 .marketing-atmosphere-traverse{left:-70%;width:240%;opacity:calc(.22 * var(--scene-capture) + .14 * var(--scene-accumulation) + .32 * var(--scene-feedback))}
 .marketing-atmosphere-signals{opacity:calc(var(--scene-signal-progress) * .26)}
 .marketing-atmosphere-powder{width:140%;left:-60%;opacity:calc(.1 * var(--scene-capture) + .02 * var(--scene-accumulation) + .09 * var(--scene-feedback))}
 .marketing-atmosphere-grain{opacity:.025}
}
@media(max-width:370px){.marketing-home #hsmr-demo[data-atmosphere-ready="true"]{--marketing-scene-inset-left:max(16px,env(safe-area-inset-left));--marketing-scene-inset-right:max(16px,env(safe-area-inset-right))}}
@media(prefers-reduced-motion:reduce){
 .marketing-atmosphere-photo,.marketing-atmosphere-relief,.marketing-atmosphere-traverse,.marketing-atmosphere-signals,.marketing-atmosphere-powder{transform:none!important;transition:none!important}
 .marketing-atmosphere-route{stroke-dashoffset:0!important}
}
