.vh-film{background:var(--vh-paint, var(--vh-surface));color:var(--vh-ink);padding-block:clamp(72px,9vw,140px)}.vh-film__inner{max-width:calc(1120px + 2 * var(--vh-edge));margin-inline:auto;padding-inline:var(--vh-edge)}.vh-film__head{max-width:40rem;margin-bottom:clamp(28px,4vw,48px)}.vh-film__title{margin:0;font-family:var(--font-heading-family);font-size:var(--vh-h1);font-weight:var(--vh-heading-weight);line-height:1.04;letter-spacing:-.015em;color:var(--vh-white)}.vh-film__lede{margin:16px 0 0;font-size:var(--vh-body);line-height:1.55;color:var(--vh-ink-soft)}.vh-film__frame{position:relative;isolation:isolate;aspect-ratio:16 / 9;border-radius:var(--vh-radius-lg);overflow:hidden;background:var(--vh-glass-panel);box-shadow:var(--vh-glass-hairline);-webkit-backdrop-filter:var(--vh-glass-blur);backdrop-filter:var(--vh-glass-blur)}.vh-film__frame.is-painted{background:var(--vh-paint);-webkit-backdrop-filter:none;backdrop-filter:none}div.vh-film__glow{display:block;position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;z-index:-1;background:radial-gradient(40% 45% at 30% 40%,rgb(72 38 124 / .55),transparent 70%),radial-gradient(30% 35% at 75% 70%,rgb(255 122 26 / .12),transparent 70%);pointer-events:none}.vh-film__scenes{position:absolute;top:0;right:0;bottom:0;left:0;margin:0;padding:0;list-style:none}.vh-film__scene{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(16px,4vw,56px);padding:clamp(24px,5vw,64px) clamp(24px,5vw,72px) clamp(56px,7vw,88px);opacity:0;transform:scale(1.02);transition:opacity .9s var(--vh-ease-out),transform 1.2s var(--vh-ease-out);pointer-events:none}.vh-film__scene.is-on{opacity:1;transform:none}.vh-film__art{display:grid;place-items:center}.vh-film__svg{inline-size:min(100%,300px);block-size:auto;overflow:visible}.vh-film__copy{max-width:26ch}.vh-film__stamp{display:block;margin-bottom:14px;font:500 13px/1 var(--vh-font);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--vh-ink-soft)}.vh-film__caption{margin:0;font-family:var(--font-heading-family);font-size:clamp(22px,2.7vw,36px);font-weight:500;line-height:1.16;letter-spacing:-.01em;color:var(--vh-white)}.vh-film__scene .vh-film__copy>*{opacity:0;transform:translate3d(0,10px,0);transition:opacity .7s var(--vh-ease-out),transform .8s var(--vh-ease-out)}.vh-film__scene.is-on .vh-film__copy>*{opacity:1;transform:none;transition-delay:.25s}.vh-film__scene.is-on .vh-film__copy>.vh-film__caption{transition-delay:.4s}.vh-film__svg :is(.f-line,.f-track,.f-node,.f-cap){fill:none;stroke:var(--vh-white);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.vh-film__svg .soft{stroke-opacity:.35}.vh-film__svg .f-track{stroke-opacity:.16;stroke-width:6}.vh-film__svg rect.f-track{stroke:none;fill:var(--vh-white);fill-opacity:.14}.vh-film__svg .f-fill{fill:rgb(var(--vh-ink-rgb) / .16);transform-origin:100px 163px;transform:scaleY(.15)}.vh-film__svg .f-bubble{fill:var(--vh-white);opacity:0}.vh-film__svg .f-node{stroke-opacity:.7;fill:rgb(var(--vh-ink-rgb) / .05)}.vh-film__svg .f-dot{fill:var(--vh-white)}.vh-film__svg .f-dot.is-hot{fill:var(--vh-orange)}.vh-film__svg .f-meter{fill:none;stroke:var(--vh-white);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transform:rotate(-90deg);transform-origin:100px 100px}.vh-film__svg .f-drop{fill:rgb(var(--vh-ink-rgb) / .1);stroke:var(--vh-white);stroke-width:1.5;opacity:0}.vh-film__svg .f-bar{fill:var(--vh-white);transform-origin:50px 155px}.vh-film__svg .f-sun{fill:var(--vh-orange);filter:drop-shadow(0 0 18px rgb(255 122 26 / .55));transform:translateY(40px);opacity:.2}.vh-film__svg .f-cap{fill:rgb(var(--vh-ink-rgb) / .06);opacity:0;transform:translateY(14px)}.vh-film__scene.is-on .is-glass .f-fill{animation:f-fill 3.4s var(--vh-ease-out) forwards}.vh-film__scene.is-on .is-glass .f-bubble{animation:f-bubble 2.2s ease-in .8s infinite}.vh-film__scene.is-on .is-glass .b2{animation-delay:1.3s}.vh-film__scene.is-on .is-glass .b3{animation-delay:1.8s}.vh-film__scene.is-on .is-ring .f-meter{animation:f-drain 3.6s var(--vh-ease-out) .3s forwards}.vh-film__scene.is-on .is-drops .f-drop{animation:f-drop 2.4s ease-in infinite}.vh-film__scene.is-on .is-drops .dr2{animation-delay:.7s}.vh-film__scene.is-on .is-drops .dr3{animation-delay:1.4s}.vh-film__scene.is-on .is-drops .f-bar{animation:f-shrink 3.6s var(--vh-ease-out) .4s forwards}.vh-film__scene.is-on .is-dawn .f-sun{animation:f-rise 3.4s var(--vh-ease-out) .2s forwards}.vh-film__scene.is-on .is-caps .f-cap{animation:f-cap .9s var(--vh-ease-out) .2s forwards}.vh-film__scene.is-on .is-caps .c2{animation-delay:.45s}@keyframes f-fill{to{transform:scaleY(1)}}@keyframes f-bubble{0%{opacity:0;transform:translateY(0)}20%{opacity:.9}to{opacity:0;transform:translateY(-58px)}}@keyframes f-drain{to{stroke-dashoffset:.72}}@keyframes f-drop{0%{opacity:0;transform:translateY(-10px)}25%{opacity:1}to{opacity:0;transform:translateY(30px)}}@keyframes f-shrink{to{transform:scaleX(.42)}}@keyframes f-rise{to{transform:translateY(-28px);opacity:1}}@keyframes f-cap{to{opacity:1;transform:none}}.vh-film__bar{position:absolute;inset-inline:clamp(18px,3vw,32px);inset-block-end:clamp(14px,2.2vw,24px);display:flex;align-items:center;gap:16px}.vh-film__segments{flex:1;display:flex;gap:6px}.vh-film__seg{flex:1;block-size:20px;padding:0;border:0;background:none;cursor:pointer;display:grid;align-items:center}.vh-film__seg span{display:block;block-size:3px;border-radius:3px;background:linear-gradient(90deg,var(--vh-white) calc(var(--p, 0) * 100%),rgb(var(--vh-ink-rgb) / .22) 0)}.vh-film__seg.is-done span{--p: 1}.vh-film__seg:focus-visible{outline:2px solid var(--vh-focus);outline-offset:2px;border-radius:4px}.vh-film__play{flex:none;display:grid;place-items:center;inline-size:36px;block-size:36px;padding:0;border:0;border-radius:50%;background:var(--vh-glass-bg);box-shadow:var(--vh-glass-hairline);color:var(--vh-white);cursor:pointer;transition:background-color .3s var(--vh-ease-out)}.vh-film__play:hover{background:var(--vh-glass-bg-hover)}.vh-film__icon{inline-size:10px;block-size:12px;background:linear-gradient(90deg,currentColor 0 34%,transparent 34% 66%,currentColor 66%)}.vh-film__play[aria-pressed=false] .vh-film__icon{background:currentColor;clip-path:polygon(12% 0,100% 50%,12% 100%)}.vh-film__note{margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--vh-ink-soft)}.vh-film--art-only .vh-film__scene{grid-template-columns:minmax(0,1fr);justify-items:center}.vh-film--art-only .vh-film__svg{inline-size:min(100%,340px)}@media(max-width:749px){.vh-film__frame{aspect-ratio:4 / 5}.vh-film__scene{grid-template-columns:1fr;grid-template-rows:1fr auto;align-items:end;gap:12px;text-align:left;padding:28px 24px 64px}.vh-film__art{align-self:center}.vh-film__svg{inline-size:min(70%,230px)}.vh-film--art-only .vh-film__scene{grid-template-rows:minmax(0,1fr);align-items:center}.vh-film--art-only .vh-film__svg{inline-size:min(80%,260px)}}.vh-film.is-still .vh-film__frame{aspect-ratio:auto}.vh-film.is-still .vh-film__scenes{position:static;display:grid;gap:8px;padding:24px}.vh-film.is-still .vh-film__scene{position:static;opacity:1;transform:none;padding:16px 0;border-bottom:1px solid var(--vh-line);grid-template-columns:120px 1fr}.vh-film.is-still .vh-film__scene .vh-film__copy>*{opacity:1;transform:none}.vh-film.is-still .vh-film__svg{inline-size:96px}.vh-film.is-still .vh-film__bar{display:none}@media(prefers-reduced-motion:reduce){.vh-film__scene,.vh-film__scene .vh-film__copy>*{transition:none}.vh-film__svg *{animation:none!important}}
/*# sourceMappingURL=/cdn/shop/t/20/assets/vh-film.css.map */