/* ------------------------------------------------------------------
   Vivid Vision Designs — homepage ("Broadsheet")
   Ember identity from css/tokens.css: red #c40a0a, ink, Helvetica Neue 200/300.
   The headline is the picture: poster-scale type, product imagery overlapping the
   letters, each discipline pinning a giant outlined word while its work scrolls past.
   Scroll effects are CSS scroll-driven animations with a static resting state, and
   everything stops under prefers-reduced-motion (bottom of this file): the words stay outlined,
   the plates rest in place and the films hold a frame.
   ------------------------------------------------------------------ */
:root{
  --red:var(--vv-red); --ink:var(--vv-charcoal); --ink2:var(--vv-ink); --grey:var(--vv-grey); --fog:var(--vv-fog); --line:var(--vv-line);
  --paper:var(--vv-white);
  --font:var(--vv-font);
  --gutter:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-weight:300;color:var(--ink);background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
/* every image carries width/height attributes for layout stability; the CSS sizes by width */
img{height:auto}
.shell{max-width:1480px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0;z-index:50;background:#fff;color:var(--ink);padding:12px 18px;font-size:13px;letter-spacing:.08em;border:1px solid var(--red)}
.skip:focus{left:16px;top:16px}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--red)}
.bar{position:absolute;top:0;left:0;right:0;z-index:20}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0}
.vvmark{height:80px;width:auto}
.bar nav{display:flex;gap:30px;font-size:12px;font-weight:400;letter-spacing:.16em;text-transform:uppercase}
.bar nav a{position:relative;padding-bottom:12px;transition:color .2s}
.bar nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:11px;background-repeat:repeat-x;background-position:left bottom;background-size:auto 11px}
.bar nav a:hover::after,.bar nav a:focus-visible::after{background-image:url(../assets/nav-squiggle.svg);animation:navflow .9s linear}
@keyframes navflow{from{background-position-x:143px}to{background-position-x:0}}
.link-under{position:relative;display:inline-block;font-size:14px;font-weight:400;letter-spacing:.08em;border-bottom:1px solid var(--red);padding-bottom:9px}
.link-under::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:11px;background-repeat:repeat-x;background-position:left bottom;background-size:auto 11px}
.link-under:hover{border-color:transparent}
.link-under:hover::after{background-image:url(../assets/nav-squiggle.svg);animation:navflow .9s linear}
.status{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}
.status .dot{width:7px;height:7px;background:var(--red);border-radius:50%}
.stores{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.stores img{height:40px;width:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
footer.contact{padding:clamp(72px,10vw,120px) 0}
footer.contact .shell{border-top:1px solid var(--line);padding-top:clamp(48px,6vw,72px)}
footer.contact h2{font-size:clamp(26px,3.6vw,40px);font-weight:200;line-height:1.14;max-width:20ch;text-wrap:balance}
footer.contact p{margin-top:18px;color:var(--grey)}
footer.contact .legal{margin-top:48px;font-size:12px;color:var(--grey)}

/* ---------- the page ---------- */
/* ---------- hero ----------
   VVD black, white type, Ember red on the emphasis. The site's HUD film sits behind the
   right half, inverted and screen-blended exactly as on the live site, faded off the
   headline. The headline column keeps its own width so the two sentences break as before. */
.hero{position:relative;padding:clamp(130px,18vh,180px) 0 0;overflow:clip;min-height:100svh;background:var(--ink2);color:#fff}
.hero-video{position:absolute;top:0;right:0;height:100%;width:66%;object-fit:cover;z-index:0;opacity:.42;pointer-events:none;
  filter:invert(1) grayscale(1) contrast(1.05) brightness(1.1);mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 62%);mask-image:linear-gradient(90deg,transparent 0,#000 62%)}
/* top scrim so the HUD sits clear of the nav */
.hero::after{content:"";position:absolute;top:0;left:0;right:0;height:220px;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(15,14,14,.85),rgba(15,14,14,.45) 60%,transparent)}
.bar nav{color:#fff}
.vvmark text{fill:#fff}
.hero > .shell{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(24px,4vw,64px)}
.hero .copy{grid-column:1;container-type:inline-size}
.hero h1{font-size:clamp(44px,14.2cqw,150px);font-weight:200;line-height:.94;letter-spacing:-.02em}
.hero h1 .l{display:block}
.hero h1 em{font-style:normal;color:var(--red)}
.hero .lede{font-size:clamp(17px,1.5vw,22px);max-width:40ch;margin-top:32px;color:rgba(255,255,255,.78);line-height:1.55}
.hero .actions{display:flex;flex-wrap:wrap;gap:32px;margin-top:36px}
.hero .link-under{font-size:15px}
.hero .copy{padding-bottom:clamp(64px,9vh,104px)}
@supports(animation-timeline:scroll()){
  .hero h1 .l{animation:lineout linear both;animation-timeline:scroll();animation-range:0 90vh}
  .hero h1 .l:nth-child(2){animation-name:lineout2}
}
@keyframes lineout{to{transform:translateX(-3vw)}}
@keyframes lineout2{to{transform:translateX(3vw)}}
/* ---------- device frames ----------
   The frame PNGs are rings: the screen is a transparent hole and the bezel is not fully
   opaque (iPad about 96%). Each screen box matches its hole exactly (measured from the
   PNG alpha) and a shaped black backing sits under the whole device, so nothing behind
   the frame (the outlined word, the bloom, the snake) reads through the bezel. */
.lap{position:relative}
.lap .lid{position:absolute;left:9.2%;top:.6%;width:81.6%;height:87%;border-radius:2.2% / 3.4%;background:#0b0b0c}
.lap .scr{position:absolute;left:10.208%;top:2.281%;width:79.542%;height:85.764%;overflow:hidden;background:#0b0b0c}
.lap .scr img{width:100%;height:100%;object-fit:cover;object-position:top}
.lap .frame{position:relative;width:100%;height:auto}
.tabf{position:relative}
.tabf .back{position:absolute;left:.9%;top:1.2%;width:98.2%;height:97.6%;border-radius:4.2% / 5.9%;background:#050505}
.tabf .scr{position:absolute;left:2.944%;top:3.885%;width:93.944%;height:92.075%;overflow:hidden;background:#050505}
.tabf .scr img,.tabf .scr video{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.tabf .frame{position:relative;width:100%;height:auto}
/* the site's iPhone frame (styles.css), plain variant: chassis, bezel, island, home bar */
.iphone{position:relative;container-type:inline-size;aspect-ratio:393/852;filter:drop-shadow(0 5.6cqw 11.45cqw rgba(0,0,0,.28))}
.iphone__chassis{position:absolute;inset:0;box-sizing:border-box;border-radius:14.25cqw;padding:1.527cqw;background:linear-gradient(155deg,#e7e4de 0%,#bdb9b1 12%,#9d998f 50%,#bdb9b1 88%,#e7e4de 100%);box-shadow:inset 0 0 0.254cqw 0.254cqw rgba(255,255,255,.5)}
.iphone__btn{position:absolute;background:linear-gradient(to bottom,#c3bfb7,#948f87);z-index:-1}
.iphone__btn--action{left:-0.763cqw;top:43.26cqw;width:1.272cqw;height:7.634cqw;border-radius:0.763cqw 0 0 0.763cqw}
.iphone__btn--volup{left:-0.763cqw;top:57.25cqw;width:1.272cqw;height:14.76cqw;border-radius:0.763cqw 0 0 0.763cqw}
.iphone__btn--voldn{left:-0.763cqw;top:76.34cqw;width:1.272cqw;height:14.76cqw;border-radius:0.763cqw 0 0 0.763cqw}
.iphone__btn--power{right:-0.763cqw;top:63.61cqw;width:1.272cqw;height:22.9cqw;border-radius:0 0.763cqw 0.763cqw 0}
.iphone__antenna{position:absolute;background:#87837b;width:1.527cqw;height:1.527cqw;z-index:1}
.iphone__antenna--tl{top:0;left:19.85cqw}.iphone__antenna--tr{top:0;right:19.85cqw}
.iphone__antenna--bl{bottom:0;left:19.85cqw}.iphone__antenna--br{bottom:0;right:19.85cqw}
.iphone__bezel{width:100%;height:100%;box-sizing:border-box;background:#0a0a0b;border-radius:12.72cqw;padding:1.781cqw}
.iphone__screen{width:100%;height:100%;box-sizing:border-box;background:#fff;border-radius:11.2cqw;position:relative;overflow:hidden}
.iphone__content{position:absolute;left:0;right:0;top:14.5cqw;bottom:0;container-type:size}
.iphone__content img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.iphone__band{position:absolute;top:0;left:0;right:0;height:14.5cqw;background:#fff;z-index:2}
.iphone__island{position:absolute;top:3.562cqw;left:50%;transform:translateX(-50%);width:30.03cqw;height:8.652cqw;background:#000;border-radius:100px;z-index:6;display:flex;align-items:center;justify-content:flex-end;padding-right:2.8cqw;box-sizing:border-box}
.iphone__island::after{content:'';width:2.545cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2b3f66 0%,#0a1022 55%,#04060d 100%);box-shadow:inset 0 0 0.5cqw rgba(120,150,255,.35)}
.iphone__home{position:absolute;bottom:2.036cqw;left:50%;transform:translateX(-50%);width:27.99cqw;height:1.272cqw;border-radius:100px;background:#14141b;z-index:5}
/* ---------- discipline sections ---------- */
.disc{position:relative;padding:clamp(56px,7vw,96px) 0 clamp(56px,7vw,96px);overflow:clip}
.disc .big{z-index:0;font-size:clamp(90px,21vw,320px);font-weight:600;line-height:.8;letter-spacing:-.04em;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1.5px var(--ink);pointer-events:none;user-select:none;margin-left:-.04em}
.disc .big{position:relative}
/* the fill keeps the outline's stroke (in its own colour) so both layers share one glyph geometry */
.disc .big i{font-style:normal;position:absolute;left:0;top:0;color:var(--ink);-webkit-text-stroke:1.5px var(--ink);clip-path:inset(0 100% 0 0)}
.disc .grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start;margin-top:clamp(28px,4vw,56px)}
.disc .grid > .art,.disc .grid > .wipe{margin-top:clamp(-120px,-14vw,-240px)}
.disc h2{font-size:clamp(28px,3.4vw,44px);font-weight:200;line-height:1.1;text-wrap:balance}
.disc p{margin-top:18px;color:var(--grey);max-width:44ch}
.disc .meta{margin-top:26px;display:grid;gap:16px;justify-items:start}
.disc .n{font-size:12px;letter-spacing:.3em;color:var(--red);font-weight:500}
@supports(animation-timeline:view()){
  .disc .big i{animation:fill linear both;animation-timeline:view();animation-range:entry 20% cover 48%}
}
/* the box ends .04em short of the last glyph (negative letter-spacing), so the clip overshoots */
@keyframes fill{to{clip-path:inset(0 -.12em 0 0)}}
/* 01 apps: laptop oversized, breaking the right edge; tablet overlapping below-left;
   the phone standing on the laptop's base at the right, in front of the screen's edge */
.apps .art{position:relative;aspect-ratio:1.25;max-height:720px}
.apps .lap{position:absolute;left:8%;top:0;width:118%;max-width:none;z-index:1}
.apps .tab{position:absolute;left:-10%;top:46%;width:52%;z-index:2;filter:drop-shadow(0 30px 50px rgba(22,19,22,.25))}
.apps .phone{position:absolute;left:56%;bottom:-2%;width:19%;z-index:3}
@supports(animation-timeline:view()){
  .apps .lap{animation:slidein linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  .apps .tab{animation:risein linear both;animation-timeline:view();animation-range:entry 15% cover 55%}
  .apps .phone{animation:risein linear both;animation-timeline:view();animation-range:entry 30% cover 60%}
}
@keyframes slidein{from{transform:translateX(18vw)}to{transform:none}}
@keyframes risein{from{transform:translateY(16vh)}to{transform:none}}
/* 02 games: art left, copy right, so the section reads the other way round from Apps and
   Design. The gameplay loop (cut from the trailer, gameplay only, screen area cropped) sits
   in the site's real iPad frame. The snake is behind the device: head over the top-left
   corner looking at the copy, tail out below. The screen is never covered. The Ember bloom
   is a colour field under the device; its shadow is a separate, light ink shadow. */
.games{padding-top:clamp(80px,9vw,140px)}
.games .big{-webkit-text-stroke-color:var(--red)}
.games .big i{color:var(--red);-webkit-text-stroke-color:var(--red)}
.games .grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;margin-top:clamp(16px,2vw,32px)}
.games .grid > .scene{order:-1}
.games .vwlogo{margin:0 0 20px}
.games .vwlogo img{height:clamp(60px,6.5vw,96px);width:auto;display:block}
.games .scene{position:relative;aspect-ratio:1800/1287;margin-left:calc(-1 * var(--gutter))}
.games .bloom{position:absolute;inset:-14% -10% -18% -8%;z-index:0;pointer-events:none;
  background:radial-gradient(50% 50% at 52% 56%, rgba(196,10,10,.88) 0%, rgba(196,10,10,.5) 40%, rgba(196,10,10,0) 70%)}
.games .ipad{position:absolute;left:6%;top:10%;width:88%;z-index:2;filter:drop-shadow(0 24px 40px rgba(22,19,22,.28))}
.games .snake{position:absolute;left:10%;top:-24%;width:40%;z-index:1;pointer-events:none;transform:rotate(6deg)}
@supports(animation-timeline:view()){
  .games .ipad{animation:ipadin linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  .games .snake{animation:snakeup linear both;animation-timeline:view();animation-range:entry 10% cover 55%}
}
@keyframes ipadin{from{transform:translateY(8vh)}to{transform:none}}
@keyframes snakeup{from{transform:rotate(6deg) translateY(30%)}to{transform:rotate(6deg)}}
/* 03 design: sketch to render wipe, scrubbed by scroll; plates fanned over the word */
.design{padding-top:clamp(120px,13vw,200px)}
/* overflow:clip, not hidden: hidden makes the plate a scroll container and the wipe's
   view timeline then measures against the plate itself and never moves */
.design .wipe{position:relative;aspect-ratio:3/2;overflow:clip;border-radius:3px;box-shadow:0 30px 60px rgba(22,19,22,.2);view-timeline-name:--wipe}
.design .wipe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* the identity plate: the wordmark on the game's own ground, so it reads while half covered */
.design .wipe .sketch{object-fit:contain;padding:14% 16%;background:linear-gradient(160deg,#7a4a8a 0%,#4b2d5e 55%,#2e1b3d 100%)}
/* the gameplay capture carries its own iPad bezel; scaled so only the screen fills the plate */
.design .wipe .render{clip-path:inset(0 0 0 100%);transform:scale(1.16)}
.design .wipe .cap{position:absolute;left:16px;bottom:14px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(22,19,22,.88);padding:6px 10px}
.design .fan{position:relative;height:clamp(300px,36vw,520px);margin-top:clamp(40px,6vw,80px)}
.design .fan img{position:absolute;width:clamp(170px,22vw,320px);border-radius:8px;box-shadow:0 30px 60px rgba(22,19,22,.28)}
.design .fan .p1{left:0;top:0;transform:rotate(-8deg)}
.design .fan .p2{left:26%;top:12%;transform:rotate(3deg)}
.design .fan .p3{left:52%;top:0;transform:rotate(9deg)}
/* every plate in the fan is 4:5; the phone screen is cropped to the same format */
.design .fan .p3{aspect-ratio:4/5;object-fit:cover;object-position:50% 38%}
.design .fan .p4{left:72%;top:14%;transform:rotate(-3deg)}
@supports(animation-timeline:view()){
  .design .wipe .render{animation:wipe linear both;animation-timeline:--wipe;animation-range:cover 38% cover 74%}
  .design .fan img{animation:fanin linear both;animation-timeline:view();animation-range:entry 0% cover 50%}
  .design .fan .p2{animation-delay:0}
}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes fanin{from{transform:translateY(40%) rotate(0)}}
/* next up strip */
.next{padding:clamp(40px,5vw,64px) 0}
.next-in{border-top:1px solid var(--line);padding-top:clamp(40px,5vw,64px)}
.next-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.next h3{font-size:clamp(22px,2.6vw,30px);font-weight:200}
@media(max-width:1180px) and (min-width:821px){
  .games .grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  .apps .phone{left:60%;width:21%}
}
@media(max-width:820px){
  .hero{padding-top:120px;min-height:0}
  .vvmark{height:56px}
  .bar nav{gap:18px;font-size:11px;letter-spacing:.1em}
  .hero > .shell{grid-template-columns:1fr}
  .hero-video{width:100%;opacity:.20;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 34%,transparent 88%);mask-image:linear-gradient(180deg,#000 0,#000 34%,transparent 88%)}
  .hero h1{font-size:clamp(40px,12.6cqw,80px)}
  .hero h1 .l{animation:none!important}
  .hero .lede{font-size:17px}
  .hero .copy{padding-bottom:56px}
  .games .grid{grid-template-columns:1fr}
  .games .grid > .scene{order:0}
  .games .scene{margin:28px 0 20px;aspect-ratio:1800/1287}
  .games .ipad{left:0;width:100%;top:12%}
  .games .snake{left:8%;top:-22%;width:44%}
  .disc .grid{grid-template-columns:1fr}
  .disc .grid > .art,.disc .grid > .wipe{margin-top:24px}
  .disc .big{font-size:clamp(70px,26vw,120px)}
  .apps .art{aspect-ratio:1.15;height:auto;max-height:none;margin-top:20px}
  .apps .lap{left:0;top:0;width:100%}
  .apps .tab{left:0;top:auto;bottom:0;width:46%}
  .apps .phone{left:auto;right:2%;bottom:-2%;width:26%}
  /* phone: two rows of two, so every plate stays inside the viewport */
  .design .fan{height:118vw}
  .design .fan img{width:42vw}
  .design .fan .p1{left:2%;top:0}
  .design .fan .p2{left:52%;top:5%}
  .design .fan .p3{left:4%;top:50%}
  .design .fan .p4{left:52%;top:54%}
  .next-in{grid-template-columns:1fr}
}

/* ---------- reduced motion: no scroll effects; each element rests in its static state ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important;animation-timeline:none!important}
}