:root {
  --vh: 100svh;
  --hair: rgba(255,255,255,0.1);
  --pink: #FF4D9D;
  --ink: #F2F1EE;
  --mute: #A5A5A9;
  --ease: cubic-bezier(.33,0,.2,1);
  --pad: clamp(20px, 3vw, 44px);
}
html, body { scroll-snap-type: y mandatory; }
body { margin: 0; background: #08080A; color: var(--ink); font-family: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif; font-weight: 300; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.t-h { margin: 0; font-family: Archivo, "Helvetica Neue", Arial, sans-serif; font-weight: 200; font-size: clamp(32px, 5vw, 86px); line-height: 1; letter-spacing: -0.042em; max-width: 15ch; text-wrap: balance; }
.t-sub { margin: 0; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; color: #DAD9D6; max-width: 46ch; font-weight: 300; text-wrap: pretty; }
.t-body { margin: 0; font-size: 17px; line-height: 1.6; color: var(--mute); max-width: 52ch; text-wrap: pretty; }
.t-num { font-family: Archivo, Arial, sans-serif; font-weight: 300; font-size: 13px; letter-spacing: 0.08em; color: var(--pink); }

.lock { height: var(--vh); box-sizing: border-box; position: relative; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
.snap { position: absolute; left: 0; width: 1px; height: var(--vh); pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }

.btn { position: relative; overflow: hidden; z-index: 0; display: inline-flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 30px; font-size: 16px; border: 1px solid rgba(255,255,255,0.34); color: var(--ink); transition: color 460ms var(--ease), border-color 460ms var(--ease); }
.btn > * { position: relative; z-index: 2; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--pink); transform: translate3d(0,101%,0); transition: transform 620ms var(--ease); }
.btn:hover::before { transform: translate3d(0,0,0); }
.btn:hover { color: #08080A; border-color: var(--pink); }
.btn svg { transition: transform 520ms var(--ease); }
.btn:hover svg { transform: translate3d(4px,-4px,0); }
.btn-fill { background: var(--ink); border-color: var(--ink); color: #08080A; }

.nav-link { position: relative; padding-bottom: 3px; font-size: 14px; transition: color 420ms var(--ease); }
.nav-link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--pink); transform: scaleX(0); transform-origin: right; transition: transform 520ms var(--ease); }
.nav-link:hover { color: var(--pink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.grid8 { height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 1px; background: var(--hair); }
@media (max-width: 1120px) { .grid8 { grid-template-columns: repeat(2, 1fr); } }
.tile { position: relative; overflow: hidden; display: block; background: #08080A; min-width: 0; min-height: 0; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.74; transition: transform 1000ms var(--ease), opacity 700ms var(--ease); }
.tile:hover img { transform: scale(1.07); opacity: 1; }
.tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(16px, 1.6vw, 26px); display: flex; flex-direction: column; gap: 6px; }

.kb { animation: kb 34s ease-in-out infinite; transform-origin: 50% 50%; will-change: transform; }
.kb-b { animation-name: kb2; animation-duration: 40s; }
.kb-c { animation-name: kb3; animation-duration: 37s; }
@keyframes kb  { 0% { transform: scale(1.05) translate3d(0,0,0); } 50% { transform: scale(1.15) translate3d(-1.4%,-1.1%,0); } 100% { transform: scale(1.05) translate3d(0,0,0); } }
@keyframes kb2 { 0% { transform: scale(1.14) translate3d(1.3%,0.8%,0); } 50% { transform: scale(1.04) translate3d(0,0,0); } 100% { transform: scale(1.14) translate3d(1.3%,0.8%,0); } }
@keyframes kb3 { 0% { transform: scale(1.06) translate3d(-1.1%,0.6%,0); } 50% { transform: scale(1.16) translate3d(1.1%,-0.8%,0); } 100% { transform: scale(1.06) translate3d(-1.1%,0.6%,0); } }

.px { position: absolute; inset: -7% 0; overflow: hidden; }
@keyframes px { from { transform: translate3d(0,-6%,0); } to { transform: translate3d(0,6%,0); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0,30px,0); } to { opacity: 1; transform: none; } }
@keyframes bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.reel { position: relative; }
.pin { position: sticky; top: 0; height: var(--vh); overflow: hidden; }
.layer { position: absolute; inset: 0; opacity: 0; }
.layer-1 { opacity: 1; }
.layer-in { opacity: 1; }
@keyframes fade  { 0% { opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeA { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fadeZ { 0% { opacity: 0; } 30%, 100% { opacity: 1; } }
@keyframes lift  { 0% { opacity: 0; transform: translate3d(0,34px,0); } 26%, 74% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(0,-18px,0); } }
@keyframes liftA { 0%, 74% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate3d(0,-18px,0); } }
@keyframes liftZ { 0% { opacity: 0; transform: translate3d(0,34px,0); } 26%, 100% { opacity: 1; transform: none; } }

@supports (animation-timeline: view()) {
  .px   { animation: px linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  .rise { animation: rise var(--ease) both; animation-timeline: view(); animation-range: entry 14% cover 40%; }
  .prog { animation: bar linear both; animation-timeline: scroll(root); }
  .reel { view-timeline-name: --reel; view-timeline-axis: block; }
  .layer, .layer-in { animation-timeline: --reel; animation-timing-function: var(--ease); animation-fill-mode: both; }
  .layer { animation-name: fade; }
  .layer-in { animation-name: lift; }
  .layer-1 { animation-name: fadeA; }
  .layer-1 .layer-in { animation-name: liftA; }
  .layer-z { animation-name: fadeZ; }
  .layer-z .layer-in { animation-name: liftZ; }
  .r3-1, .r3-1 .layer-in { animation-range: cover 6%  cover 40%; }
  .r3-2, .r3-2 .layer-in { animation-range: cover 33% cover 70%; }
  .r3-3, .r3-3 .layer-in { animation-range: cover 63% cover 96%; }
}
.foot-grid { display: grid; gap: 32px clamp(32px, 4vw, 72px); grid-template-columns: repeat(4, 1fr); align-items: start; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
.soc { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hair); margin-left: -1px; color: #B9B8B5; transition: background-color 460ms var(--ease), color 460ms var(--ease), border-color 460ms var(--ease); }
.soc:first-child { margin-left: 0; }
.soc:hover { background: var(--pink); border-color: var(--pink); color: #08080A; }
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-snap-type: none; }
  .px, .rise, .prog, .kb, .layer, .layer-in { animation: none !important; }
  .layer { opacity: 1; position: relative; }
  .pin { position: relative; height: auto; }
}