:root {
  --motion-ease: cubic-bezier(.16, 1, .3, 1);
  --motion-spring: cubic-bezier(.19, 1.42, .32, 1);
}

/* The controls keep their original hit area. Only the glass skin and highlights bend. */
.liquid-control {
  position: relative;
  isolation: isolate;
  --glass-x: 37%;
  --glass-y: 10%;
  --glass-dx: 0px;
  --glass-dy: 0px;
  --glass-roll: 0deg;
  --glass-stretch: 1;
  --glass-compress: 1;
  --glass-ink: #f4f6eb;
  --glass-solid: #232a20;
  --glass-fill: rgb(68 75 61 / 36%);
  --glass-rim: rgb(240 248 219 / 44%);
  --glass-spec: rgb(255 255 255 / 32%);
  --glass-radius: 100px;
}
.liquid-control.liquid-control,
#lens .optic-toggle.liquid-control {
  border-color: transparent !important;
  border-radius: var(--glass-radius);
  color: var(--glass-ink);
  background: transparent !important;
}
.liquid-control::before,.liquid-control::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  transform: translate3d(var(--glass-dx), var(--glass-dy), 0)
    rotate(var(--glass-roll)) scale(var(--glass-stretch), var(--glass-compress));
  border-radius: inherit;
  transition: transform .52s var(--motion-spring), opacity .25s;
}
.liquid-control::before {
  border: 1px solid var(--glass-rim);
  background: linear-gradient(178deg, rgb(255 255 255 / 17%), transparent 37%, rgb(0 0 0 / 5%) 68%, rgb(245 255 220 / 12%)), var(--glass-solid);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 55%), inset 1px -2px 4px rgb(234 255 185 / 14%), 0 3px 12px rgb(0 0 0 / 19%);
}
@supports ((backdrop-filter:blur(4px)) or (-webkit-backdrop-filter:blur(4px))) {
  .liquid-control::before {
    background: linear-gradient(178deg, rgb(255 255 255 / 17%), transparent 37%, rgb(0 0 0 / 5%) 68%, rgb(245 255 220 / 12%)), var(--glass-fill);
    -webkit-backdrop-filter: blur(9px) saturate(1.55);
    backdrop-filter: blur(9px) saturate(1.55);
  }
}
.liquid-control::after {
  background: radial-gradient(ellipse at var(--glass-x) var(--glass-y), var(--glass-spec), transparent 42%);
  opacity: .42;
}
.liquid-control.glass-active::after, .liquid-control:focus-visible::after { opacity: 1; }
.liquid-control.glass-active::before, .liquid-control.glass-active::after { transition-duration: .19s; }
.liquid-control.glass-pressed::before, .liquid-control.glass-pressed::after {
  transform: translate3d(var(--glass-dx), calc(var(--glass-dy) + 1px), 0) scale(.93,.88);
  transition-duration: 80ms;
}
.liquid-control:where(.primary,.contact-top,.player-original,.selected) {
  --glass-ink: #111907;
  --glass-fill: rgb(202 250 67 / 90%);
  --glass-solid: #c9f855;
  --glass-spec: rgb(255 255 255 / 90%);
  --glass-rim: rgb(242 255 211 / 90%);
}
.liquid-control.darkbtn {
  --glass-fill: rgb(16 26 10 / 87%);
  --glass-rim: rgb(41 66 17 / 80%);
}
.liquid-control:is(#share,.underlink) { padding: 9px 14px; }
.liquid-control#close { --glass-radius: 50%; }
.liquid-control .triangle,.liquid-control.contact-top span,.liquid-control.darkbtn span {
  translate: calc(var(--glass-dx) * .5) calc(var(--glass-dy) * .5);
  transition: translate .35s var(--motion-spring);
}
.hero.moving-image .hero-picture {
  inset: -2.9%;
  transform: translate3d(var(--scene-x, 0px),var(--scene-y, 0px),0);
  transition: transform .36s cubic-bezier(.2,.69,.24,1);
}
.hero.moving-image .hero-content #hero-title,.hero.moving-image .hero-credit {
  translate: var(--type-x,0px) var(--type-y,0px);
  transition: translate .37s var(--motion-ease);
}
.hero.moving-image .hero-credit { translate: calc(var(--type-x,0px) * .55) calc(var(--type-y,0px) * .55); }
.hero .motion-word { display: inline-block; white-space: nowrap; }
.hero .motion-glyph { display: inline-block; transform-origin: 50% 88%; }
.hero.swapping .hero-content { animation: none; }
.camera-field { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.focus-reticle {
  position: absolute;
  width: clamp(56px,6.5vw,112px);
  aspect-ratio: 1.32;
  inset: 0 auto auto 0;
  transform: translate3d(var(--focus-x), var(--focus-y), 0) translate(-50%,-50%);
  opacity: var(--focus-alpha,0);
  transition: opacity .25s, transform .36s cubic-bezier(.16,.8,.24,1);
}
.focus-reticle::after, .focus-reticle::before {
  content:"";position:absolute;inset:0;
  --corner: linear-gradient(var(--lime),var(--lime));
  background:
    var(--corner) left top / 16% 1px, var(--corner) left top / 1px 19%,
    var(--corner) right top / 16% 1px, var(--corner) right top / 1px 19%,
    var(--corner) left bottom / 16% 1px, var(--corner) left bottom / 1px 19%,
    var(--corner) right bottom / 16% 1px, var(--corner) right bottom / 1px 19%;
  background-repeat:no-repeat;
}
.focus-reticle::before { inset:calc(50% - 4px) calc(50% - 4px);background:linear-gradient(var(--lime),var(--lime)) center / 100% 1px no-repeat, linear-gradient(var(--lime),var(--lime)) center / 1px 100% no-repeat; }
.reel-shutter { position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none; }
.reel-shutter canvas { position:absolute;top:0;height:100%;display:block; }
.perform { position:relative; }
.stat-number { font-variant-numeric: tabular-nums; }
.stat-number .motion-number { display:inline-block; white-space:nowrap; }
.motion-stat-track { display:block; height:1px; background:#525a40; width:clamp(42px,6vw,90px); margin-top:9px; overflow:hidden; }
.motion-stat-track::before { content:"";display:block;width:100%;height:100%;background:var(--lime);transform-origin:left;transform:scaleX(var(--stat-progress,1)); }
.card.glass-art .card-image { 
  transform: perspective(850px) rotateX(var(--art-rx,0deg)) rotateY(var(--art-ry,0deg));
  transition: transform .4s var(--motion-ease);
}
.card.glass-art .card-image::after {
  background: radial-gradient(ellipse at var(--art-x,50%) var(--art-y,-100%),rgb(238 255 201 / 13%),transparent 48%), linear-gradient(0deg,#0009,transparent 30%,transparent 78%,#0003);
}
@media(max-width:680px) {
  .stat-number .motion-number { font-size:clamp(26px,6.9vw,45px); }
}
@media(min-width:681px) {
  .stat-number .motion-number { font-size:clamp(26px,3.23vw,64px); }
}
@media(prefers-reduced-motion:reduce) {
  .hero.moving-image .hero-picture { inset:0; transform:none; }
  .hero.moving-image .hero-content #hero-title,.hero.moving-image .hero-credit { translate:none; }
  .camera-field,.reel-shutter,.motion-stat-track { display:none; }
  .liquid-control::before,.liquid-control::after,.card.glass-art .card-image { transform:none!important; }
  .liquid-control .triangle,.liquid-control.contact-top span,.liquid-control.darkbtn span { translate:none; }
}
@media(prefers-reduced-motion:no-preference) {
  .hero.moving-image .hero-picture { scale:var(--hero-zoom,1); }
  .hero.moving-image .hero-content { transform:translateY(var(--hero-rise,0px)); }
  .hero.moving-image .hero-bottom { opacity:var(--hero-footer-opacity,1); }
  .motion-heading:not(:focus-within) {
    transform:translateY(var(--entry-y,0px)) rotate(var(--entry-angle,0deg));
    transform-origin:0% 90%;
    clip-path:inset(-15% -3% var(--entry-mask,-16%) -3%);
  }
  .card.glass-art:not(:focus-visible) .card-image { translate:0 var(--tile-depth,0px); }
  .studio .lens-stage.scroll-optic:not(:focus-within) { translate:0 var(--optic-shift,0px); }
}
@media(prefers-reduced-motion:no-preference) {
  .stat { perspective:540px; }
  .stat-number { perspective:540px; perspective-origin:35% 100%; }
  .stat-number .motion-number {
    position:relative;
    transform-origin:0% 85%;
    transform-style:preserve-3d;
    transform:translateZ(var(--counter-depth,0px)) rotateX(var(--counter-pitch,0deg)) rotateY(var(--counter-yaw,0deg));
    text-shadow:0 calc(var(--face-depth,0em) * .35) 0 rgb(181 196 148 / 40%), 0 calc(var(--face-depth,0em) * .65) 0 rgb(120 140 88 / 43%), 0 var(--face-depth,0em) 0 rgb(72 87 52 / 50%);
  }
}
.motion-count-hint { margin-top:8px; color:#bdc3ac; font:400 10px/1.3 var(--micro); max-width:21ch; transition:opacity .18s; }
.motion-count-hint.count-complete { opacity:0; }
@media(prefers-reduced-motion:reduce) { .motion-count-hint { display:none; } }