:root {
  --blue: #86b9cf;
  --blue-deep: #5b91aa;
  --ink: #17252b;
  --paper: #f5f0e5;
  --red: #b4473f;
  --shadow: 0 18px 45px rgb(29 59 70 / 22%);
  --header-height: 112px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  background-color: #5f7b80;
  background-image:
    linear-gradient(rgb(211 216 202 / 30%), rgb(211 216 202 / 30%)),
    radial-gradient(circle at 52% 42%, rgb(186 146 92 / 23%) 0, rgb(137 107 70 / 10%) 42%, transparent 70%),
    linear-gradient(145deg, rgb(18 53 67 / 48%), rgb(72 63 47 / 42%)),
    url("../images/blue-texture.jpg");
  background-size: auto, auto, auto, cover;
  background-attachment: fixed;
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.site-shell {
  width: min(1380px, calc(100% - 40px));
  margin: 18px auto 36px;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-header {
  min-height: 112px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 0 24px;
  background: transparent;
  border-bottom: 0;
}
.brand { width: 190px; min-height: 74px; border: 0; background: transparent; padding: 0; cursor: pointer; transform-origin: 48% 52%; transition: transform .48s cubic-bezier(.22,.61,.36,1); will-change: transform; }
.brand img { width: 100%; max-height: 90px; object-fit: contain; display: block; }
.brand-fallback { font: 34px/1 "Special Elite", serif; transform: rotate(-2deg); display: block; }
.main-nav { display: flex; align-items: center; gap: 8px; }
.nav-link {
  border: 0;
  background: transparent;
  padding: 10px 12px 8px;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .11em;
  cursor: pointer;
  position: relative;
  transform-origin: 50% 65%;
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.nav-link::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: rgb(255 255 255 / 92%); transform: scaleX(0) rotate(-1deg); transition: .2s; }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1) rotate(-1deg); }
.nav-link:hover { transform: scale(1.045) rotate(-.65deg); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 9px; }
.menu-toggle span { display: block; width: 27px; height: 2px; margin: 6px; background: var(--ink); }

.carousel {
  position: sticky;
  top: var(--header-height);
  z-index: 1;
  min-height: 690px;
  overflow: hidden;
  overscroll-behavior-inline: contain;
  background: transparent;
  border-bottom: 0;
}
.lower-sheet {
  position: relative;
  z-index: 5;
  border-top: 1px solid rgb(245 239 220 / 42%);
  background-color: #5f7b80;
  background-image:
    linear-gradient(rgb(211 216 202 / 30%), rgb(211 216 202 / 30%)),
    radial-gradient(circle at 52% 42%, rgb(186 146 92 / 23%) 0, rgb(137 107 70 / 10%) 42%, transparent 70%),
    linear-gradient(145deg, rgb(18 53 67 / 48%), rgb(72 63 47 / 42%)),
    url("../images/blue-texture.jpg");
  background-size: auto, auto, auto, cover;
  background-attachment: fixed;
  box-shadow: 0 -18px 42px rgb(14 39 47 / 14%);
}
.slides { display: flex; transition: transform .55s cubic-bezier(.65,.05,.36,1); touch-action: pan-y; }
.slide { min-width: 100%; min-height: 620px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(38px, 7vw, 100px); padding: 42px 70px 78px; opacity: .2; transition: opacity .4s; }
.slide.is-active { opacity: 1; }
.paper-card { background: var(--paper); box-shadow: var(--shadow); position: relative; }
.release-art { max-width: 445px; padding: 16px 16px 48px; transform: rotate(-2deg); transform-origin: 50% 58%; transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s ease; will-change: transform; }
.release-art img, .portrait img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: #d6d0c3; pointer-events: none; }
.release-art img, .portrait img { transform-origin: center; transition: transform .7s cubic-bezier(.22,.61,.36,1); }
.release-sphere-scene { position: relative; width: min(100%, 500px); aspect-ratio: 1; display: grid; place-items: center; justify-self: center; isolation: isolate; }
.release-sphere-ground-shadow { --ground-shadow-x: 0px; --ground-shadow-scale-x: 1; --ground-shadow-scale-y: .86; --ground-shadow-opacity: .25; --ground-shadow-blur: 12px; position: absolute; left: 50%; bottom: -4.5%; z-index: 0; width: 46%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse at center, rgb(8 28 35 / 76%) 0, rgb(10 33 40 / 43%) 42%, transparent 74%); opacity: var(--ground-shadow-opacity); filter: blur(var(--ground-shadow-blur)); transform: translate3d(calc(-50% + var(--ground-shadow-x)), 0, 0) scaleX(var(--ground-shadow-scale-x)) scaleY(var(--ground-shadow-scale-y)); transform-origin: center; will-change: transform, opacity, filter; pointer-events: none; }
.release-sphere { width: 100%; aspect-ratio: 1; position: relative; z-index: 1; transform: translate3d(0, 0, 0) rotate(0); transform-origin: center; backface-visibility: hidden; will-change: transform; }
.release-sphere-visual { --release-drag-x: 0px; --release-drag-y: 0px; --release-hover-scale: 1; position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: #3d3631; box-shadow: inset 18px 20px 34px rgb(255 255 255 / 11%), inset -28px -32px 46px rgb(8 20 25 / 34%), 0 28px 58px rgb(18 42 48 / 28%); transform: translate3d(var(--release-drag-x), var(--release-drag-y), 0) scale(var(--release-hover-scale)); transition: transform .34s cubic-bezier(.22,.61,.36,1), box-shadow .65s ease; animation: release-sphere-depth 10.5s ease-in-out infinite alternate; }
.release-sphere-image { position: absolute; inset: 0; z-index: 0; display: block; transform: translateZ(0) scale(1); transform-origin: center; backface-visibility: hidden; will-change: transform; }
.release-sphere-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 47%; filter: saturate(.8) contrast(.96) brightness(.94); transform: translateZ(0) scale(1.035); transform-origin: center; backface-visibility: hidden; transition: transform .75s cubic-bezier(.22,.61,.36,1), filter .5s ease; pointer-events: none; }
.release-sphere-visual::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: 50%; background: radial-gradient(circle at 28% 19%, rgb(255 255 255 / 21%) 0, rgb(255 255 255 / 7%) 16%, transparent 36%), radial-gradient(circle at 75% 82%, transparent 40%, rgb(8 25 31 / 11%) 66%, rgb(5 19 24 / 31%) 100%); pointer-events: none; }
.release-sphere-visual::after { content: ""; position: absolute; left: 9%; top: -5%; z-index: 4; width: 62%; height: 27%; border-radius: 50%; background: linear-gradient(145deg, rgb(255 255 255 / 38%), rgb(255 255 255 / 4%) 66%, transparent); filter: blur(7px); opacity: .5; transform: rotate(-17deg); animation: release-sphere-glint 7.8s ease-in-out infinite alternate; pointer-events: none; }
.release-sphere-small-glint { position: absolute; left: 22%; top: 7%; z-index: 5; width: 16%; height: 9%; border-radius: 50%; background: radial-gradient(ellipse at center, rgb(255 255 255 / 78%) 0, rgb(255 255 255 / 34%) 38%, transparent 74%); filter: blur(2.5px); opacity: .64; transform: rotate(-18deg); animation: release-small-glint 6.4s ease-in-out infinite alternate; pointer-events: none; }
.release-sphere-head-glint { position: absolute; right: 5%; top: 52%; z-index: 4; width: 31%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse at center, rgb(255 255 255 / 34%) 0, rgb(255 255 255 / 13%) 42%, transparent 76%); filter: blur(10px); opacity: .3; transform: rotate(-12deg); animation: release-head-glint 9.2s ease-in-out infinite alternate; pointer-events: none; }
.release-sphere-shadow-deep { position: absolute; left: -16%; bottom: -27%; z-index: 1; width: 132%; height: 50%; border-radius: 50% 50% 0 0 / 24% 24% 0 0; background: linear-gradient(to bottom, rgb(1 8 11 / 12%) 0, rgb(1 7 10 / 58%) 24%, rgb(1 5 8 / 89%) 58%, rgb(0 3 5 / 98%) 100%); filter: blur(3.5px); opacity: .9; transform-origin: 50% 10%; animation: release-shadow-deep 9.2s ease-in-out infinite alternate; pointer-events: none; }
.release-sphere-shadow-wave { position: absolute; left: -15%; bottom: -15%; z-index: 2; width: 130%; height: 53%; border-radius: 50% 50% 0 0 / 29% 29% 0 0; background: linear-gradient(to bottom, rgb(2 11 14 / 12%) 0, rgb(2 11 14 / 68%) 23%, rgb(1 7 10 / 89%) 58%, rgb(1 5 7 / 97%) 100%); box-shadow: 0 -6px 15px rgb(1 8 11 / 38%); filter: blur(2.5px); opacity: .88; transform-origin: 50% 12%; animation: release-shadow-wave 6.9s ease-in-out infinite alternate; pointer-events: none; }
.release-sphere-hit { position: absolute; inset: .5%; z-index: 10; border-radius: 50%; pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
.release-sphere.is-dragging .release-sphere-hit { cursor: grabbing; }
.release-sphere.is-dragging .release-sphere-visual { transition: none; }
.release-sphere-onboarding { position: absolute; inset: 0; z-index: 18; pointer-events: none; opacity: 0; }
.release-sphere-onboarding.is-showing { animation: release-onboarding-life 7.2s ease both; }
.release-demo-hand { position: absolute; left: 60%; top: 58%; width: 50px; height: 50px; opacity: 0; transform-origin: 44% 46%; }
.release-sphere-onboarding.is-showing .release-demo-hand { animation: release-demo-hand-path 7.2s cubic-bezier(.45,.04,.26,1) both; }
.release-demo-hand-open, .release-demo-hand-curl-one, .release-demo-hand-curl-two, .release-demo-hand-closed { position: absolute; inset: 0; display: block; background-image: url("../images/drag-hand-stages.png"); background-repeat: no-repeat; background-size: 200% 200%; filter: drop-shadow(0 2px 3px rgb(23 37 43 / 46%)); opacity: 0; }
.release-demo-hand-open { background-position: left top; opacity: 1; }
.release-demo-hand-curl-one { background-position: right top; }
.release-demo-hand-curl-two { background-position: left bottom; }
.release-demo-hand-closed { background-position: right bottom; }
.release-sphere-onboarding.is-showing .release-demo-hand-open { animation: release-demo-hand-open 7.2s linear both; }
.release-sphere-onboarding.is-showing .release-demo-hand-curl-one { animation: release-demo-hand-curl-one 7.2s linear both; }
.release-sphere-onboarding.is-showing .release-demo-hand-curl-two { animation: release-demo-hand-curl-two 7.2s linear both; }
.release-sphere-onboarding.is-showing .release-demo-hand-closed { animation: release-demo-hand-closed 7.2s linear both; }
.release-onboarding-copy { position: absolute; inset: 0; display: block; color: rgb(23 37 43 / 73%); font-size: 10px; font-weight: 700; letter-spacing: .105em; line-height: 1; text-align: center; text-transform: uppercase; opacity: 0; }
.release-onboarding-char { position: absolute; display: block; white-space: pre; transform-origin: center; }
.release-sphere-onboarding.is-showing .release-onboarding-copy { animation: release-onboarding-copy 7.2s ease both; }
.release-onboarding-mobile { display: none; }
.slide-copy { max-width: 510px; }
.slide-home .slide-copy { align-self: stretch; position: relative; display: flex; flex-direction: column; justify-content: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 700; margin: 0 0 16px; }
.slide-copy > .eyebrow, .postcard > .eyebrow { margin-bottom: 30px; }
h1, h2 { font: 400 clamp(46px, 7vw, 88px)/.9 "Special Elite", serif; margin: 0 0 24px; letter-spacing: -.04em; }
.typewriter-char { opacity: 1; pointer-events: none; }
.is-typing .typewriter-char { opacity: 0; }
.is-typing .typewriter-char.is-visible { opacity: 1; }
.slide-copy > p:not(.eyebrow) { max-width: 550px; font-size: clamp(17px, 2vw, 20px); line-height: 1.65; }
.slide[data-slide="erlin-post"] .slide-copy { max-width: 580px; }
.slide[data-slide="erlin-post"] .slide-copy > .eyebrow { margin-bottom: 18px; }
.slide[data-slide="erlin-post"] .slide-copy > h2 { margin-bottom: 18px; }
.slide[data-slide="erlin-post"] [data-erlin-bio] { white-space: pre-line; font-size: clamp(13px, 1.15vw, 15px); line-height: 1.45; text-align: justify; text-align-last: left; text-justify: inter-word; hyphens: none; word-break: normal; overflow-wrap: normal; }
[data-velyvey-description] { white-space: pre-line; }
.about-bubbles { position: relative; width: min(100%, 540px); min-height: 570px; align-self: stretch; justify-self: center; isolation: isolate; contain: layout paint; }
.about-bubble { --bubble-size: 64px; position: absolute; left: 0; top: 0; width: var(--bubble-size); height: var(--bubble-size); will-change: transform; pointer-events: none; touch-action: none; user-select: none; }
.about-bubble-visual { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: rgb(239 240 226 / 45%); border: 1px solid rgb(255 255 255 / 68%); box-shadow: inset 0 0 18px rgb(255 255 255 / 24%), 0 12px 28px rgb(18 47 56 / 20%); transform: scale(1); transform-origin: center; transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; pointer-events: none; }
.about-bubble-hit { position: absolute; inset: 5%; z-index: 2; border-radius: 50%; pointer-events: auto; cursor: grab; }
.about-bubble-visual::after { content: ""; position: absolute; inset: 8% 16% 66% 22%; border-radius: 50%; background: linear-gradient(145deg, rgb(255 255 255 / 46%), rgb(255 255 255 / 0%)); opacity: .24; filter: blur(.7px); transform: translate3d(-4%, 3%, 0) rotate(-18deg); animation: bubble-glint 7.5s ease-in-out infinite alternate; pointer-events: none; }
.about-bubble:nth-child(2n) .about-bubble-visual::after { animation-delay: -2.6s; animation-duration: 8.7s; }
.about-bubble:nth-child(3n) .about-bubble-visual::after { animation-delay: -4.1s; animation-duration: 9.4s; }
.about-bubble img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(.76) contrast(.96); }
.about-bubble.is-primary { --bubble-size: clamp(158px, 15.5vw, 204px); z-index: 3; }
.about-bubble.is-artem-main img { object-position: 50% 61%; transform: scale(1.06); transform-origin: center; }
.about-bubble.is-secondary { --bubble-size: clamp(82px, 8vw, 108px); z-index: 2; }
.about-bubble.is-wide img { object-position: 53% center; }
.about-bubble.is-release { z-index: 1; }
.about-bubble.is-release-one { --bubble-size: clamp(42px, 4.5vw, 56px); }
.about-bubble.is-release-two { --bubble-size: clamp(38px, 4vw, 50px); }
.about-bubble.is-release-three { --bubble-size: clamp(40px, 4.2vw, 52px); }
.about-bubble.is-release-four { --bubble-size: clamp(36px, 3.8vw, 48px); }
.about-bubble.is-release-five { --bubble-size: clamp(38px, 4vw, 50px); }
.about-bubble.is-release-six { --bubble-size: clamp(36px, 3.8vw, 48px); }
.about-bubble.is-empty { z-index: 0; }
.about-bubble.is-empty .about-bubble-visual { background: rgb(236 243 239 / 4%); border-color: rgb(255 255 255 / 48%); box-shadow: inset 0 0 12px rgb(255 255 255 / 10%), 0 5px 14px rgb(18 47 56 / 9%); }
.about-bubble.is-empty .about-bubble-visual::after { display: none; }
.about-bubble.is-empty-one { --bubble-size: 18px; }
.about-bubble.is-empty-two { --bubble-size: 25px; }
.about-bubble.is-empty-three { --bubble-size: 14px; }
.about-bubble.is-empty-four { --bubble-size: 21px; }
.about-bubble.is-empty-five { --bubble-size: 29px; }
.about-bubble.is-empty-small { --bubble-size: 14px; }
.about-bubble.is-empty-tiny-one { --bubble-size: 10px; }
.about-bubble.is-empty-tiny-two { --bubble-size: 13px; }
.about-bubble.is-empty-tiny-three { --bubble-size: 16px; }
.about-bubble:hover .about-bubble-visual { transform: scale(1.018); }
.about-bubble.is-dragging { z-index: 30; cursor: grabbing; }
.about-bubble.is-dragging .about-bubble-hit { cursor: grabbing; }
.about-bubble.is-dragging .about-bubble-visual { transform: scale(1.032); box-shadow: inset 0 0 20px rgb(255 255 255 / 28%), 0 18px 38px rgb(18 47 56 / 25%); }
.about-bubble.is-popping .about-bubble-visual { animation: bubble-pop .28s cubic-bezier(.4,0,.2,1) forwards; }
.about-bubble.is-reappearing .about-bubble-visual { animation: bubble-reappear .34s cubic-bezier(.22,.61,.36,1) both; }
.velyvey-bubbles { position: relative; width: min(100%, 460px); height: 430px; align-self: center; justify-self: center; isolation: isolate; contain: layout paint; }
.velyvey-bubble { --velyvey-bubble-size: 22px; position: absolute; left: 0; top: 0; width: var(--velyvey-bubble-size); height: var(--velyvey-bubble-size); will-change: transform; pointer-events: none; touch-action: none; user-select: none; }
.velyvey-bubble-visual { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; transform: scale(1); transform-origin: center; transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease; pointer-events: none; }
.velyvey-bubble-hit { position: absolute; inset: 4%; z-index: 2; border-radius: 50%; pointer-events: auto; cursor: grab; }
.velyvey-bubble.is-core { --velyvey-bubble-size: clamp(190px, 18vw, 238px); z-index: 3; }
.velyvey-bubble.is-core .velyvey-bubble-visual { background: #9eb7b6; border: 0; box-shadow: inset 13px 15px 25px rgb(255 255 255 / 17%), inset -18px -20px 30px rgb(17 42 50 / 25%), 0 22px 48px rgb(18 47 56 / 24%); animation: velyvey-glass-depth 9.6s ease-in-out infinite alternate; }
.velyvey-bubble.is-core .velyvey-bubble-visual::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 50%; background: radial-gradient(circle at 29% 20%, rgb(255 255 255 / 26%) 0, rgb(255 255 255 / 10%) 13%, transparent 34%), radial-gradient(circle at 72% 80%, transparent 42%, rgb(10 35 43 / 8%) 66%, rgb(7 28 35 / 25%) 100%); pointer-events: none; }
.velyvey-bubble.is-core .velyvey-bubble-visual::after { content: ""; position: absolute; left: 11%; top: 8%; z-index: 3; width: 62%; height: 29%; border-radius: 50%; background: linear-gradient(145deg, rgb(255 255 255 / 44%), rgb(255 255 255 / 5%) 64%, transparent); filter: blur(5px); opacity: .58; transform: rotate(-16deg); animation: velyvey-glass-glint 7.2s ease-in-out infinite alternate; pointer-events: none; }
.velyvey-bubble.is-core img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(.93); transform: translateY(5%) scale(1.42); transform-origin: center; }
.velyvey-bubble.is-empty { z-index: 1; }
.velyvey-bubble.is-empty .velyvey-bubble-visual { background: rgb(236 243 239 / 4%); border: 1px solid rgb(255 255 255 / 52%); box-shadow: inset 0 0 12px rgb(255 255 255 / 11%), 0 6px 16px rgb(18 47 56 / 10%); }
.velyvey-bubble.is-empty-one { --velyvey-bubble-size: 18px; }
.velyvey-bubble.is-empty-two { --velyvey-bubble-size: 27px; }
.velyvey-bubble.is-empty-three { --velyvey-bubble-size: 14px; }
.velyvey-bubble.is-empty-four { --velyvey-bubble-size: 31px; }
.velyvey-bubble.is-empty-five { --velyvey-bubble-size: 21px; }
.velyvey-bubble.is-empty-six { --velyvey-bubble-size: 25px; }
.velyvey-bubble.is-empty-seven { --velyvey-bubble-size: 16px; }
.velyvey-bubble:hover .velyvey-bubble-visual { transform: scale(1.016); }
.velyvey-bubble.is-dragging { z-index: 30; }
.velyvey-bubble.is-dragging .velyvey-bubble-hit { cursor: grabbing; }
.velyvey-bubble.is-core.is-dragging .velyvey-bubble-visual { transform: scale(1.022); animation-play-state: paused; }
.velyvey-bubble.is-popping .velyvey-bubble-visual { animation: bubble-pop .28s cubic-bezier(.4,0,.2,1) forwards; }
.velyvey-bubble.is-reappearing .velyvey-bubble-visual { animation: bubble-reappear .34s cubic-bezier(.22,.61,.36,1) both; }
@keyframes bubble-glint {
  from { opacity: .14; transform: translate3d(-8%, 5%, 0) rotate(-22deg) scale(.9); }
  to { opacity: .28; transform: translate3d(16%, -7%, 0) rotate(-8deg) scale(1.08); }
}
@keyframes bubble-pop {
  0% { opacity: 1; transform: scale(1); }
  55% { opacity: .62; transform: scale(.58); }
  100% { opacity: 0; transform: scale(1.16); }
}
@keyframes bubble-reappear {
  from { opacity: 0; transform: scale(.25); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes velyvey-glass-glint {
  from { opacity: .42; transform: translate3d(-10%, 7%, 0) rotate(-19deg) scale(.93); }
  to { opacity: .82; transform: translate3d(31%, -9%, 0) rotate(-8deg) scale(1.07); }
}
@keyframes velyvey-glass-depth {
  from { box-shadow: inset 13px 15px 25px rgb(255 255 255 / 17%), inset -16px -17px 27px rgb(17 42 50 / 21%), 0 21px 46px rgb(18 47 56 / 23%); }
  to { box-shadow: inset 11px 13px 23px rgb(255 255 255 / 15%), inset -20px -24px 34px rgb(17 42 50 / 29%), 0 24px 51px rgb(18 47 56 / 25%); }
}
@keyframes release-sphere-glint {
  from { opacity: .34; transform: translate3d(-9%, 6%, 0) rotate(-19deg) scale(.94); }
  to { opacity: .7; transform: translate3d(29%, -8%, 0) rotate(-9deg) scale(1.06); }
}
@keyframes release-sphere-depth {
  from { box-shadow: inset 18px 20px 34px rgb(255 255 255 / 11%), inset -25px -28px 42px rgb(8 20 25 / 30%), 0 26px 54px rgb(18 42 48 / 26%); }
  to { box-shadow: inset 14px 17px 30px rgb(255 255 255 / 9%), inset -31px -37px 50px rgb(8 20 25 / 38%), 0 31px 64px rgb(18 42 48 / 30%); }
}
@keyframes release-onboarding-life {
  0%, 5% { opacity: 0; }
  12%, 80% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes release-demo-hand-path {
  0%, 4% { opacity: 0; transform: translate3d(34px, -22px, 0) rotate(-22deg) scale(.92); }
  11% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-16deg) scale(1); }
  24% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-16deg) scale(1); }
  44% { opacity: 1; transform: translate3d(-15px, 66px, 0) rotate(-9deg) scale(.98); }
  45% { opacity: 0; transform: translate3d(-15px, 66px, 0) rotate(-9deg) scale(.98); }
  45.2% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-16deg) scale(1); }
  46%, 59% { opacity: 1; transform: translate3d(0, 0, 0) rotate(-16deg) scale(1); }
  80% { opacity: 1; transform: translate3d(-20px, 72px, 0) rotate(-8deg) scale(.98); }
  90%, 100% { opacity: 0; transform: translate3d(-24px, 82px, 0) rotate(-7deg) scale(.95); }
}
@keyframes release-demo-hand-open {
  0%, 13% { opacity: 1; }
  14.4%, 45% { opacity: 0; }
  45.2%, 48% { opacity: 1; }
  49.4%, 100% { opacity: 0; }
}
@keyframes release-demo-hand-curl-one {
  0%, 13% { opacity: 0; }
  14.4%, 15.6% { opacity: 1; }
  17%, 48% { opacity: 0; }
  49.4%, 50.6% { opacity: 1; }
  52%, 100% { opacity: 0; }
}
@keyframes release-demo-hand-curl-two {
  0%, 15.6% { opacity: 0; }
  17%, 18.2% { opacity: 1; }
  19.6%, 50.6% { opacity: 0; }
  52%, 53.2% { opacity: 1; }
  54.6%, 100% { opacity: 0; }
}
@keyframes release-demo-hand-closed {
  0%, 18.2% { opacity: 0; }
  19.6%, 44% { opacity: 1; }
  45%, 53.2% { opacity: 0; }
  54.6%, 82% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
@keyframes release-onboarding-copy {
  0%, 2% { opacity: 0; }
  7%, 84% { opacity: .92; }
  94%, 100% { opacity: 0; }
}
@keyframes release-small-glint {
  0% { opacity: .4; transform: translate3d(-9%, 5%, 0) rotate(-20deg) scale(.88); }
  38% { opacity: .78; transform: translate3d(8%, -7%, 0) rotate(-15deg) scale(1.04); }
  100% { opacity: .55; transform: translate3d(34%, 6%, 0) rotate(-10deg) scale(.94); }
}
@keyframes release-head-glint {
  0% { opacity: .18; transform: translate3d(-10%, 8%, 0) rotate(-14deg) scale(.9); }
  52% { opacity: .36; transform: translate3d(5%, -8%, 0) rotate(-9deg) scale(1.06); }
  100% { opacity: .24; transform: translate3d(18%, 3%, 0) rotate(-5deg) scale(.96); }
}
@keyframes release-shadow-wave {
  0% { transform: translate3d(-14%, 2%, 0) rotate(-4.4deg) scaleY(.94); opacity: .78; }
  46% { transform: translate3d(1%, -2%, 0) rotate(1.2deg) scaleY(1.04); opacity: .96; }
  100% { transform: translate3d(14%, 1%, 0) rotate(4.7deg) scaleY(.97); opacity: .84; }
}
@keyframes release-shadow-deep {
  0% { transform: translate3d(9%, 1%, 0) rotate(2.8deg) scaleY(.96); opacity: .84; }
  48% { transform: translate3d(-2%, -1%, 0) rotate(-.8deg) scaleY(1.03); opacity: .97; }
  100% { transform: translate3d(-11%, 2%, 0) rotate(-3.2deg) scaleY(.98); opacity: .89; }
}
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.button-link { text-decoration: none; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; font-weight: 700; border: 2px solid var(--ink); padding: 13px 17px; background: rgb(245 240 229 / 25%); transition: .2s; }
.button-link:hover { background: var(--ink); color: var(--paper); transform: translateY(-2px); }
.release-presave { position: static; align-self: stretch; width: 100%; justify-content: flex-start; margin: 24px 0 0; padding-left: 8px; }
.presave-button { min-width: 132px; padding: 11px 22px; border-width: 1px; text-align: center; background: rgb(245 240 229 / 12%); }
.presave-button.is-disabled { cursor: default; }

.slide-shop { grid-template-columns: .9fr 1.1fr; gap: clamp(34px, 6vw, 76px); }
.shop-intro { align-self: center; justify-self: center; padding-top: 0; text-align: center; max-width: 520px; }
.shop-intro h2 { font-size: clamp(48px, 6vw, 72px); }
.shop-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.shop-choice { min-height: 330px; padding: 26px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; color: var(--ink); background: var(--paper); border: 1px solid rgb(23 37 43 / 15%); box-shadow: var(--shadow); cursor: pointer; transform: rotate(1.4deg); transition: transform .24s, box-shadow .24s, outline-color .24s; }
.shop-choice:nth-child(2) { transform: rotate(-1.4deg) translateY(28px); }
.shop-choice:hover, .shop-choice.is-active { transform: rotate(0) translateY(-4px); box-shadow: 0 22px 48px rgb(20 51 61 / 28%); outline: 2px solid rgb(255 255 255 / 80%); outline-offset: 3px; }
.shop-choice-index { color: var(--red); font: 28px "Special Elite", serif; margin-bottom: 18px; }
.shop-choice .eyebrow { margin-bottom: 0; }
.shop-choice strong { margin: auto 0 10px; font: 25px/1.1 "Special Elite", serif; }
.shop-choice > span:nth-last-child(2) { font-size: 14px; line-height: 1.45; }
.shop-choice-action { margin-top: 22px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.slide-library { grid-template-columns: .9fr 1.1fr; gap: clamp(34px, 6vw, 76px); }
.library-intro { align-self: center; justify-self: center; text-align: center; }
.library-intro h2 { font-size: clamp(48px, 6vw, 72px); }
.library-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; }
.library-choice { min-height: 260px; padding: 26px; display: flex; flex-direction: column; align-items: flex-start; color: var(--ink); background: var(--paper); border: 1px solid rgb(23 37 43 / 15%); box-shadow: var(--shadow); transform: rotate(1.2deg); }
.library-choice:nth-child(2) { transform: rotate(-1.2deg) translateY(24px); }
.library-choice strong { margin: auto 0 12px; font: 25px/1.1 "Special Elite", serif; }
.library-choice > span:last-child { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

.portrait { max-width: 420px; padding: 14px 14px 42px; transform: rotate(2deg); transform-origin: 50% 58%; transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s ease; will-change: transform; }
.reverse .portrait { order: 2; transform: rotate(-2deg); }
.reverse .velyvey-bubbles { order: 2; }
.contact-slide { grid-template-columns: 1fr; justify-items: center; }
.postcard { width: min(700px, 100%); padding: clamp(36px, 7vw, 76px); transform: rotate(-1deg); transform-origin: 52% 55%; transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease; will-change: transform; }
.postcard::after { content: "ERLIN POST"; position: absolute; right: 45px; top: 45px; border: 2px solid var(--red); color: var(--red); padding: 15px 8px; transform: rotate(5deg); font: 13px "Special Elite", serif; }
.postcard h2 { font-size: clamp(48px, 7vw, 78px); }
.contact-links { display: grid; grid-template-columns: repeat(4, minmax(74px, 1fr)); gap: 18px; margin-top: 34px; }
.contact-link { position: relative; display: grid; justify-items: center; gap: 8px; color: var(--ink); font-size: 10px; font-weight: 700; letter-spacing: .08em; line-height: 1.1; text-align: center; text-decoration: none; text-transform: uppercase; transition: transform .24s cubic-bezier(.22,.61,.36,1), color .24s ease; }
.contact-link img { width: 29px; height: 29px; object-fit: contain; transition: transform .24s cubic-bezier(.22,.61,.36,1), filter .24s ease; }
.contact-mail-icon { display: grid; width: 29px; height: 29px; place-items: center; font: 48px/.62 Arial, sans-serif; transition: transform .24s cubic-bezier(.22,.61,.36,1), color .24s ease; }
.contact-link:hover, .contact-link:focus-visible { color: var(--red); transform: translateY(-3px) rotate(-2deg); }
.contact-link:hover img, .contact-link:focus-visible img { filter: sepia(.5) saturate(1.7); transform: rotate(4deg) scale(1.1); }
.contact-link:hover .contact-mail-icon, .contact-link:focus-visible .contact-mail-icon { transform: rotate(4deg) scale(1.1); }
.contact-link.is-coming-soon { padding: 0; border: 0; background: transparent; font: inherit; cursor: help; }
.contact-link[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 9px); left: 50%; z-index: 2; width: max-content; padding: 6px 8px; border: 1px solid rgb(23 37 43 / 18%); background: var(--paper); color: var(--ink); box-shadow: 0 6px 14px rgb(18 42 48 / 15%); font-size: 9px; letter-spacing: .08em; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .2s ease, transform .2s ease; }
.contact-link[data-tooltip]:hover::after, .contact-link[data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
@media (hover: hover) and (pointer: fine) { .postcard:hover { transform: translateY(-5px) rotate(-.55deg) scale(1.012); box-shadow: 0 14px 25px rgb(16 40 46 / 13%); } }

.carousel-arrow { position: absolute; top: 48%; z-index: 3; width: 48px; height: 48px; border: 1px solid rgb(23 37 43 / 35%); border-radius: 50%; background: rgb(245 240 229 / 38%); cursor: pointer; transition: .2s; }
.carousel-arrow:hover { background: var(--paper); }
.carousel-arrow.prev { left: 4px; }
.carousel-arrow.next { right: 4px; }
.carousel-dots { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); display: flex; gap: 12px; }
.carousel-dot { width: 10px; height: 10px; border: 1px solid var(--ink); border-radius: 50%; padding: 0; background: transparent; cursor: pointer; }
.carousel-dot.is-active { background: var(--ink); }

.shop-assortment {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  background: rgb(245 240 229 / 11%);
  border-bottom: 0 solid rgb(23 37 43 / 16%);
  transition: grid-template-rows .55s cubic-bezier(.65,.05,.36,1), opacity .35s ease, border-width .35s ease, visibility 0s linear .55s;
}
.shop-assortment.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  border-bottom-width: 1px;
  transition: grid-template-rows .55s cubic-bezier(.65,.05,.36,1), opacity .42s ease .08s, border-width .2s ease, visibility 0s;
}
.shop-assortment-clip { min-height: 0; overflow: hidden; }
.shop-assortment-inner { padding: clamp(38px, 6vw, 68px) clamp(34px, 6vw, 70px); }
.assortment-heading { margin-bottom: 38px; text-align: center; }
.assortment-heading .eyebrow { margin-bottom: 14px; }
.assortment-heading > p:last-child { margin: 0 auto; font-size: 15px; line-height: 1.6; max-width: 620px; }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.product-card { min-width: 0; }
.product-image-placeholder { aspect-ratio: 1; display: grid; place-items: center; padding: 20px; background: rgb(250 248 241 / 92%); border: 1px solid rgb(23 37 43 / 15%); box-shadow: 0 14px 30px rgb(16 42 51 / 13%); color: rgb(23 37 43 / 52%); text-transform: uppercase; letter-spacing: .13em; font-size: 10px; }
.product-meta { min-height: 78px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name cart" "price cart"; gap: 4px 14px; align-items: center; padding: 16px 2px 0; }
.product-name { grid-area: name; font-weight: 700; }
.product-price { grid-area: price; font-size: 13px; }
.cart-button { grid-area: cart; width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgb(23 37 43 / 48%); border-radius: 50%; background: rgb(245 240 229 / 45%); cursor: pointer; transition: background .2s, color .2s; }
.cart-button:hover { background: var(--ink); color: var(--paper); }
.cart-icon { width: 16px; height: 13px; border: 1.5px solid currentColor; border-radius: 2px; position: relative; display: block; }
.cart-icon::before { content: ""; position: absolute; width: 7px; height: 5px; left: 3px; top: -6px; border: 1.5px solid currentColor; border-bottom: 0; border-radius: 5px 5px 0 0; }
.cart-icon::after { content: "+"; position: absolute; right: -7px; bottom: -8px; width: 13px; height: 13px; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink); font: 11px/1 sans-serif; }

.platform-strip {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 28px clamp(38px, 6vw, 86px) 14px;
  background: transparent;
}
.player-section {
  background: transparent;
  padding: clamp(28px, 4vw, 50px) clamp(38px, 6vw, 86px) 18px;
  display: block;
}
.player-label { margin: 0; text-align: center; }
.player-media { width: min(915px, 100%); margin: 0 auto; display: grid; grid-template-columns: 285px minmax(0, 600px); gap: 30px; align-items: start; justify-content: center; }
.player-listening { width: 100%; min-width: 0; }
.canvas-frame { position: relative; width: 285px; height: 506px; margin: 0; overflow: hidden; border-radius: 12px; background: #172a31; box-shadow: 0 15px 32px rgb(17 42 50 / 18%); transform-origin: 50% 58%; transition: transform .55s cubic-bezier(.22,.61,.36,1), box-shadow .55s ease; }
.canvas-frame[hidden] { display: none; }
.canvas-frame video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22,.61,.36,1); pointer-events: none; }
.canvas-frame figcaption { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 8px; border-radius: 7px; background: rgb(17 36 43 / 68%); color: white; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-align: center; text-transform: uppercase; white-space: nowrap; backdrop-filter: blur(5px); }
.canvas-frame.is-link { cursor: pointer; }
.canvas-frame.is-link:focus-visible { outline: 2px solid rgb(255 255 255 / 90%); outline-offset: 4px; }
.spotify-frame iframe { display: block; width: 100%; border: 0; border-radius: 12px; }
.player-placeholder { border: 1px dashed var(--ink); padding: 30px; line-height: 1.6; }
.release-viewport { width: 100%; overflow: hidden; }
.release-gallery { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 100px; justify-content: start; gap: 14px; overflow-x: auto; padding: 22px 0 12px; scrollbar-width: none; overscroll-behavior-inline: contain; }
.release-viewport.can-scroll-right .release-gallery { -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 34px), transparent 100%); }
.release-viewport.can-scroll-left .release-gallery { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 100%); mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 100%); }
.release-viewport.can-scroll-left.can-scroll-right .release-gallery { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%); }
.release-gallery::-webkit-scrollbar { display: none; }
.release-card { min-width: 0; display: block; text-decoration: none; }
.release-card img { width: 100%; aspect-ratio: 1; display: block; object-fit: cover; background: var(--paper); box-shadow: 0 12px 24px rgb(17 42 50 / 16%); filter: saturate(.56) contrast(.9) brightness(.95) sepia(.08); opacity: .92; transition: transform .22s, box-shadow .22s, filter .25s, opacity .25s; }
.release-card span { display: block; margin-top: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.release-card:hover img { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 17px 30px rgb(17 42 50 / 24%); filter: saturate(.7) contrast(.93) brightness(.97) sepia(.05); opacity: .98; }
.platforms {
  width: min(100%, 760px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
}
.platforms a { flex: 0 1 112px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--ink); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 9px; line-height: 1.2; text-decoration: none; }
.platforms img { width: 28px; height: 28px; object-fit: contain; transition: transform .2s ease, opacity .2s ease; }
.platforms span { max-width: 100%; white-space: nowrap; }
.platforms a:hover img { transform: translateY(-3px); opacity: .72; }
.platforms a:hover span { text-decoration: underline; text-underline-offset: 4px; }
footer { border-top: 1px solid rgb(23 37 43 / 20%); min-height: 54px; display: flex; justify-content: center; align-items: center; text-align: center; text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }

body.shop-hidden [data-shop-nav] { display: none; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .brand:hover { transform: translateY(-1px) rotate(-.55deg) scale(1.006); }
  .canvas-frame:hover { transform: translateY(-4px) rotate(.8deg); box-shadow: 0 23px 44px rgb(17 42 50 / 25%); }
  .canvas-frame:hover video { transform: scale(1.01); }
  .release-sphere.is-hovered .release-sphere-visual { --release-hover-scale: 1.007; }
  .release-sphere.is-hovered .release-sphere-visual img { transform: translateZ(0) scale(1.044); filter: saturate(.83) contrast(.97) brightness(.95); }
  .release-art:hover { transform: translateY(-5px) rotate(-1.35deg); box-shadow: 0 25px 52px rgb(18 44 51 / 22%); }
  .portrait:hover { transform: translateY(-5px) rotate(1.35deg); box-shadow: 0 25px 52px rgb(18 44 51 / 22%); }
  .reverse .portrait:hover { transform: translateY(-5px) rotate(-1.35deg); }
  .release-art:hover img, .portrait:hover img { transform: scale(1.012); }
}

@media (min-width: 1100px) {
  .site-header { padding-inline: clamp(42px, 5vw, 70px); }
  .carousel { min-height: 760px; }
  .slide { min-height: 690px; padding: 50px clamp(78px, 7vw, 106px) 92px; }
  .release-sphere-scene { width: min(100%, 530px); }
  .release-art { max-width: 500px; }
  .portrait { max-width: 465px; }
  .slide-copy { max-width: 560px; }
}

@media (max-width: 820px) {
  :root { --header-height: 90px; }
  .site-shell { width: min(100% - 22px, 680px); }
  .site-header { min-height: 90px; }
  .brand { width: 145px; }
  .menu-toggle { display: block; cursor: pointer; }
  .main-nav { display: none; position: absolute; top: 80px; left: 0; right: 0; padding: 12px; flex-direction: column; background: var(--paper); box-shadow: var(--shadow); }
  .main-nav.is-open { display: flex; }
  .nav-link { width: 100%; padding: 12px; }
  .carousel { min-height: 690px; }
  .slide { min-height: 640px; grid-template-columns: 1fr; gap: 36px; align-content: center; padding: 34px 46px 72px; }
  .release-sphere-scene, .release-art, .portrait { width: min(330px, 90%); justify-self: center; }
  .about-bubbles { width: min(390px, 90%); min-height: 390px; height: 390px; align-self: auto; }
  .velyvey-bubbles { width: min(360px, 92%); height: 335px; align-self: auto; }
  .slide-copy { text-align: center; justify-self: center; }
  .slide-home .slide-copy { align-self: auto; position: static; }
  .release-presave { position: static; justify-content: center; margin-top: 28px; padding-left: 0; }
  .slide-copy > p:not(.eyebrow) { font-size: 16px; }
  .button-row { justify-content: center; }
  .shop-intro { text-align: center; }
  .shop-choice-grid { width: min(520px, 100%); }
  .assortment-heading > p:last-child { justify-self: center; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .reverse .portrait { order: initial; }
  .reverse .velyvey-bubbles { order: initial; }
  .platform-strip { gap: 20px; padding-block: 30px; }
  .platforms { width: min(100%, 520px); gap: 18px 10px; }
  .player-section { text-align: center; }
  .player-media { grid-template-columns: 210px minmax(0, 1fr); gap: 18px; }
  .canvas-frame { width: 210px; height: 373px; }
  .release-gallery { grid-auto-columns: 100px; text-align: left; }
}

@media (max-width: 540px) {
  .carousel { min-height: 700px; }
  .slide-shop { min-height: 760px; }
  .shop-choice-grid { grid-template-columns: 1fr; }
  .shop-choice { min-height: 190px; padding: 20px; transform: none; }
  .shop-choice:nth-child(2) { transform: none; }
  .slide { padding-left: 34px; padding-right: 34px; }
  .release-sphere-scene { width: min(310px, 84vw); }
  .release-onboarding-desktop { display: none; }
  .release-onboarding-mobile { display: block; }
  .release-demo-hand { width: 43px; height: 43px; }
  .release-art { padding: 10px 10px 34px; }
  .about-bubbles { width: min(310px, 94%); min-height: 330px; height: 330px; }
  .velyvey-bubbles { width: min(300px, 94%); height: 285px; }
  .velyvey-bubble.is-core { --velyvey-bubble-size: clamp(164px, 55vw, 196px); }
  .player-media { grid-template-columns: 1fr; }
  .canvas-frame { width: min(190px, 58vw); height: auto; aspect-ratio: 9 / 16; justify-self: center; }
  h1, h2 { font-size: 44px; }
  .product-grid { grid-template-columns: 1fr; }
  .postcard::after { right: 25px; top: 25px; }
  .contact-links { grid-template-columns: repeat(2, minmax(84px, 1fr)); max-width: 250px; }
  .carousel-arrow { width: 38px; height: 38px; }
  footer { flex-direction: column; justify-content: center; gap: 10px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}