@font-face{font-family:"Vika Sans";
  src:url('./assets/vika-sans-regular.woff2') format('woff2');
  font-weight:400;
  font-display:swap}

:root{color-scheme:dark;
  --frame:clamp(1px,.24cqw,2px);
  --cream:#faede4;
  --ink:#310a09;
  --sway:0px;
  --drift:0px;
  --scene-shift:0px}

*{box-sizing:border-box}
html{background:#220407;
  scroll-behavior:smooth}
body{margin:0;
  color:var(--cream);
  font-family:"Vika Sans",Arial,sans-serif;
  font-synthesis:none;
  font-weight:400;
  overflow-x:clip}
h1,h2,p{margin:0}
h1,h2{font-family:'Times New Roman',Times,serif;
  font-weight:400}
a{color:inherit;
  text-decoration:none}
a:focus-visible{outline:2px solid currentColor;
  outline-offset:5px}
[hidden]{display:none!important}
.skip{position:fixed;
  left:12px;
  top:-100px;
  z-index:20;
  background:#fff;
  color:#310a09;
  padding:12px}
.skip:focus{top:12px}

.atmosphere{display:none;
  position:fixed;
  inset:0;
  pointer-events:none;
  background:#220407 url('./assets/stage-words-v2.webp') center top/max(1586px,100vw) auto no-repeat;
  z-index:-1;
  mask-image:linear-gradient(to bottom,#000 0,#000 850px,transparent 992px)}

main{position:relative;
  max-width:680px;
  margin:auto;
  container-type:inline-size;
  background:url('./assets/fabric-clean.webp') top center/100% 100% no-repeat;
  min-height:100svh}

.hero{height:68.097cqw;
  position:relative;
  overflow:hidden}
.hero-image{display:block;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto}
.hero-copy{position:absolute;
  left:8.121cqw;
  top:29.93cqw}
.author{font-size:2.204cqw;
  letter-spacing:.14cqw;
  line-height:1.4}
.hero h1{font-size:9.513cqw;
  letter-spacing:-.32cqw;
  line-height:.87;
  margin-top:2.5cqw}
.subtitle{font-size:2.9cqw;
  line-height:1.3;
  margin-top:1.65cqw;
  white-space:nowrap}

.materials{margin:0 4.408cqw;
  display:grid;
  gap:1.74cqw}
.card{--card-radius:1.4cqw;
  --card-inner-radius:calc(var(--card-radius) - var(--frame));
  position:relative;
  color:var(--ink);
  border-radius:var(--card-radius);
  isolation:isolate;
  background:#f4e3df;
  box-shadow:0 0 0 1px #f9efe9,inset 0 0 0 var(--frame) #f9efe9}
.card::after{content:'';
  position:absolute;
  inset:var(--frame);
  border:1px solid #8f66605c;
  border-radius:var(--card-inner-radius);
  pointer-events:none;
  z-index:2}
.card-art{position:absolute;
  inset:var(--frame);
  overflow:hidden;
  border-radius:var(--card-inner-radius);
  background-image:url('./assets/reference-mobile.webp');
  background-repeat:no-repeat;
  background-size:111.948% 579.365%;
  background-position:51.087% 39.536%;
  z-index:-1}
.card-soon .card-art{background-size:111.948% 1086.31%;
  background-position:51.087% 57.152%}
.card-cinema .card-art{background-size:111.948% 741.87%;
  background-position:51.087% 72.894%}
.card-copy{position:relative;
  height:100%}
.card-reels{height:38.863cqw}
.card-soon{height:21.81cqw}
.card-cinema{height:30.858cqw}
.eyebrow{position:absolute;
  top:4.06cqw;
  left:4.176cqw;
  font-size:1.74cqw;
  letter-spacing:.36cqw;
  text-transform:uppercase;
  line-height:1.4}
.card h2{position:absolute;
  left:4.176cqw;
  top:7.19cqw;
  font-size:7.657cqw;
  line-height:.9;
  letter-spacing:-.26cqw}
.card-description{position:absolute;
  left:4.176cqw;
  top:22.39cqw;
  font-size:2.55cqw;
  line-height:1.35;
  white-space:nowrap}
.button{position:absolute;
  left:4.176cqw;
  top:28.306cqw;
  width:35.27cqw;
  height:6.73cqw;
  border:1px solid currentColor;
  border-radius:.23cqw;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  font-size:2.55cqw;
  white-space:nowrap;
  transition:background .18s,border-color .18s,box-shadow .18s}
.button::after{content:'';
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:max(100%,44px);
  transform:translateY(-50%)}
@media(hover:hover){.button:hover{background:#ffffff26;box-shadow:0 0 0 1px currentColor}}
.button:active{background:#ffffff32}
.card-soon h2{top:7.77cqw;
  font-size:6.73cqw;
  letter-spacing:-.21cqw}
.card-soon .card-description{top:14.73cqw}
.card-cinema h2{top:8.24cqw;
  font-size:6.032cqw;
  white-space:nowrap;
  letter-spacing:-.22cqw}
.card-cinema .card-description{top:15.08cqw;
  font-size:2.32cqw}
.card-cinema .button{top:20.42cqw;
  width:24.36cqw;
  height:6.61cqw}

.personal{position:relative;
  text-align:center;
  height:35.847cqw}
.hairline{width:8.005cqw;
  height:1px;
  background:currentColor;
  opacity:.72;
  margin:0 auto}
.personal .hairline{position:absolute;
  top:4.64cqw;
  left:46cqw}
.personal h2{position:absolute;
  top:8.7cqw;
  width:100%;
  font-size:6.73cqw;
  line-height:.9;
  letter-spacing:-.18cqw}
.personal .button{top:23.55cqw;
  left:50%;
  transform:translateX(-50%);
  width:40.023cqw;
  height:7.889cqw;
  font-size:2.55cqw;
  border-color:#f9e8dd}
footer{height:12.76cqw;
  text-align:center;
  position:relative}
footer .channel,footer .signature{display:inline-block;
  margin-top:3.48cqw;
  font-size:2.436cqw}
.channel{border-bottom:1px solid currentColor;
  line-height:1.6}
.signature{opacity:.65}

/* One central canvas at every viewport width */
@media(min-width:681px){
 main{mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
}
.atmosphere{display:block;opacity:clamp(0,calc((100vw - 1000px)/200px),1)}
.ambient-fabric{position:fixed;inset:-16px;pointer-events:none;z-index:-1;opacity:clamp(0,calc((100vw - 1000px)/1100px),.18);background:url('./assets/fabric-clean.webp') center/100% 100% no-repeat;transform:translateY(var(--drift));mask-image:linear-gradient(90deg,#000,transparent 14%,transparent 86%,#000)}
.channel-pending{border-bottom:0;opacity:.65}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .opening{display:none}
 .ambient-fabric{transform:none}
 .button{transition:none}
}

/* Keep elastic scroll from exposing a gap between the canvas and fixed scene */
html,body{overscroll-behavior:none}
.card-link{display:block;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
.card-link .button::after{content:none}
.card-link:focus-visible{outline:2px solid #fff2df;outline-offset:4px}
@media(hover:hover) and (pointer:fine){
 .card-link:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #fff8ef,0 7px 22px #0800003d,inset 0 0 0 var(--frame) #f9efe9}
 .card-link:hover .button{background:#ffffff26;box-shadow:0 0 0 1px currentColor}
}
.card-link:active{transform:translateY(0);box-shadow:0 0 0 1px #fff8ef,inset 0 0 0 var(--frame) #f9efe9}
.card-link:active .button{background:#ffffff40}
@media(prefers-reduced-motion:reduce){.card-link{transition:none}.card-link:hover,.card-link:active{transform:none}}

/* Bounded parallax: extra canvas around the viewport prevents exposed edges */
.atmosphere{inset:-24px;transform:translate3d(0,var(--scene-shift),0);transition:transform .18s ease-out;will-change:transform}
.ambient-fabric{transition:transform .18s ease-out}
@media(prefers-reduced-motion:reduce){.atmosphere,.ambient-fabric{transform:none;transition:none;will-change:auto}}

/* The same opacity-only arrival and 2.6s background easing as the questionnaire */
main{background:none;isolation:isolate}
main::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url('./assets/fabric-clean.webp') top center/100% 100% no-repeat}
.motion main::before,.motion .hero-image,.motion .hero-copy,.motion .card,.motion .personal,.motion footer{opacity:0}
.motion main::before{transition:opacity 2.6s cubic-bezier(.4,0,.2,1)}
.motion .atmosphere{opacity:0;transition:opacity 2.6s cubic-bezier(.4,0,.2,1),transform .18s ease-out}
.motion .ambient-fabric{opacity:0;transition:opacity 2.6s cubic-bezier(.4,0,.2,1),transform .18s ease-out}
.motion .background-ready main::before{animation:soft-arrive 2.6s cubic-bezier(.4,0,.2,1) both}
.motion .stage-ready .atmosphere{--final-opacity:clamp(0,calc((100vw - 1000px)/200px),1);animation:scene-arrive 2.6s cubic-bezier(.4,0,.2,1) both}
.motion .background-ready .ambient-fabric{--final-opacity:clamp(0,calc((100vw - 1000px)/1100px),.18);animation:scene-arrive 2.6s cubic-bezier(.4,0,.2,1) both}
.motion .page-ready .hero-image.hero-ready{animation:soft-arrive 1.9s .4s ease-in-out both}
.motion .page-ready .hero-copy,.motion .page-ready .card,.motion .page-ready .personal,.motion .page-ready footer{animation:soft-arrive 1.8s var(--entry-delay) ease-in-out both}
.hero-copy{--entry-delay:.7s}
.card-reels{--entry-delay:1s}
.card-soon{--entry-delay:1.2s}
.card-cinema{--entry-delay:1.4s}
.personal{--entry-delay:1.6s}
footer{--entry-delay:1.8s}
@keyframes scene-arrive{from{opacity:0}to{opacity:var(--final-opacity)}}
@keyframes soft-arrive{from{opacity:0}to{opacity:1}}
.motion .page-ready a:focus-visible{opacity:1;animation:none}
@media(prefers-reduced-motion:reduce){
 .motion main::before,.motion .hero-image,.motion .hero-copy,.motion .card,.motion .personal,.motion footer{opacity:1;animation:none!important;transition:none!important}
 .motion .atmosphere,.motion .ambient-fabric{transition:none!important;animation-duration:0s!important}
}


/* Composite desktop scenery once, so overlapping layers cannot darken the centre early */
@media(min-width:1001px){
 .scene{position:relative;isolation:isolate;min-height:100svh;background:#220407}
 .motion .scene{opacity:0}
 .motion .page-ready .scene{animation:soft-arrive 2.6s cubic-bezier(.4,0,.2,1) both}
 .motion .scene main::before{opacity:1;animation:none;transition:none}
 .motion .scene .atmosphere{opacity:clamp(0,calc((100vw - 1000px)/200px),1);animation:none;transition:transform .18s ease-out}
 .motion .scene .ambient-fabric{opacity:clamp(0,calc((100vw - 1000px)/1100px),.18);animation:none;transition:transform .18s ease-out}
}
@media(min-width:1001px) and (prefers-reduced-motion:reduce){.motion .scene{opacity:1;animation:none}}

/* Entrance is a one-time lifecycle, not a breakpoint-dependent state */
html.motion.entrance-complete{animation:none;background:#220407}
html.entrance-complete .scene,
html.entrance-complete main::before,
html.entrance-complete .hero-image,
html.entrance-complete .hero-copy,
html.entrance-complete .card,
html.entrance-complete .personal,
html.entrance-complete footer{animation:none!important;opacity:1!important}
html.entrance-complete .atmosphere{animation:none!important;opacity:clamp(0,calc((100vw - 1000px)/200px),1)!important}
html.entrance-complete .ambient-fabric{animation:none!important;opacity:clamp(0,calc((100vw - 1000px)/1100px),.18)!important}

/* Keep the canvas stable; decorative layers retain their original entrance */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation-duration:0s}}

/* Fade before a normal page navigation while the burgundy canvas stays visible */
body{transition:opacity .3s ease-in-out}
html.page-exiting body{opacity:0;pointer-events:none}
html{scroll-behavior:auto}
@keyframes vika-page-out{to{opacity:0}}
@keyframes vika-page-in{from{opacity:0}}
::view-transition-old(root){animation:vika-page-out .3s ease-in-out both}
::view-transition-new(root){animation:vika-page-in .45s ease-in-out both}
@media(prefers-reduced-motion:reduce){body{transition:none}::view-transition-old(root),::view-transition-new(root){animation:none}}