/* BitRep home, "night pixel world" mock. Sits on top of home.css and
   only adds the new hero, the grow-on-scroll moment, the three feature
   cards and the closing scene. Pixel art stays crisp; companions only
   bob, hop and slide. */
:root { --amber: #FFC24B; --rose: #FF6B8B; --sky1: #0E1020; --sky2: #12142B; --sky3: #171936; --sky4: #1D1D44; --sky5: #262352; }
img.px, .px img { image-rendering: pixelated; }

/* Header floats over the sky */
.bar.over { position: absolute; left: 0; right: 0; background: transparent; border-bottom: 0; }

/* Sky: stepped bands, like a pixel-art sky, not a smooth gradient */
.world { position: relative; overflow: hidden; background: var(--sky1); }
.scene { background: linear-gradient(to bottom, transparent 0 14%, var(--sky2) 14% 32%, var(--sky3) 32% 50%, var(--sky4) 50% 68%, var(--sky5) 68% 100%); }
.stars { position: absolute; inset: 0; pointer-events: none; }
.stars i { position: absolute; width: 3px; height: 3px; background: #fff; opacity: .55; }
.stars i.b { width: 4px; height: 4px; background: #C9C8FF; opacity: .8; }
.stars i.t { animation: tw 3.2s steps(2) infinite; }
@keyframes tw { 50% { opacity: .12; } }
.moon { position: absolute; top: 104px; right: 9%; width: 56px; height: 56px; image-rendering: pixelated; }

.hero2 { position: relative; z-index: 2; padding-top: calc(100px + env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.hero2 h1 { font-size: clamp(36px, 10.4vw, 88px); letter-spacing: -0.04em; }
.hero2 h1 em { font-style: normal; color: var(--accent); }
.hero2 .lede { max-width: 60ch; }


/* The scene: skyline layers, ground, the phone in the middle,
   companions standing on the ground, stickers floating around. */
.scene { --pw: clamp(200px, 16vw, 232px); --gap: 2vw; --mw: clamp(130px, 13vw, 184px); --mw-big: clamp(130px, 13vw, 190px); --mw-small: clamp(80px, 8vw, 116px);
  position: relative; width: 100%; height: calc(var(--pw) * 1.99 + 96px); margin-top: clamp(4px, 1.5vw, 16px); }
.sky-far, .sky-near { position: absolute; left: -2%; right: -2%; background-repeat: repeat-x; image-rendering: pixelated; will-change: transform; }
.sky-far { bottom: 64px; height: 200px; background-image: url("img/skyline.svg"); background-size: auto 200px; opacity: .55; }
.sky-near { bottom: 56px; height: 130px; background-image: url("img/skyline.svg"); background-size: auto 130px; background-position: 380px 0; filter: brightness(.7); }
.windows { position: absolute; left: 0; right: 0; bottom: 64px; height: 190px; pointer-events: none; }
.windows i { position: absolute; width: 6px; height: 6px; background: #FFC24B; opacity: .5; }
.ground2 { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; background:
    linear-gradient(to bottom, #3A3577 0 8px, #2A2758 8px 16px, #1D1B40 16px 100%); }
.ground2::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 4px; background: repeating-linear-gradient(to right, #3A3577 0 24px, transparent 24px 56px); opacity: .7; }

.scene .phone { position: absolute; left: 50%; bottom: 34px; width: var(--pw); transform: translateX(-50%); z-index: 3; }
.scene .phone video { filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); }

.mate { position: absolute; bottom: 46px; z-index: 4; width: var(--w, 150px); }
.mate img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.mate .bob { display: block; animation: bob 2.4s steps(4) infinite; animation-delay: var(--d, 0s); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mate .hop { display: block; }
.mate .hop.go { animation: hop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes hop { 40% { transform: translateY(-26px); } 100% { transform: translateY(0); } }
.mate { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mate::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 2px; height: 8px; background: rgba(0,0,0,.35); z-index: -1; }

/* Stickers: pixel icons with a white sticker edge */
.stk { position: absolute; z-index: 5; width: var(--w, 64px); pointer-events: none;
  filter: drop-shadow(0 10px 12px rgba(0,0,0,.45));
  transform: rotate(var(--r, 0deg)); animation: drift 6s ease-in-out infinite; animation-delay: var(--d, 0s); }
.stk img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
@keyframes drift { 50% { translate: 0 -10px; } }
.chip { position: absolute; z-index: 5; pointer-events: none; font: 700 clamp(14px, 1.6vw, 18px)/1 var(--pixel); letter-spacing: .04em; padding: 9px 12px 8px; border-radius: 6px; color: #0E1020; background: var(--mint); box-shadow: 0 0 0 3px #fff, 0 8px 14px rgba(0,0,0,.35); transform: rotate(var(--r, 0deg)); animation: drift 6s ease-in-out infinite; animation-delay: var(--d, 0s); white-space: nowrap; }
.chip.amber { background: var(--amber); }
.chip.iris { background: var(--accent); }

/* Phone-width scene: fewer companions and stickers */
@media (max-width: 700px) {
  .scene { --pw: 158px; --gap: 0px; --mw: min(124px, calc((100vw - var(--pw)) / 2 - 2px)); }
  .mate.far, .stk.far, .chip.far { display: none; }
  .hero2 .fine { display: none; }
  .chip { font-size: 13px; padding: 7px 9px 6px; }
}
/* Larger screens: one-line headline so the whole scene, phone included,
   fits in the first screen of a laptop. */
@media (min-width: 701px) {
  .hero2 { padding-top: calc(88px + env(safe-area-inset-top)); gap: 14px; }
  .hero2 { padding-top: calc(80px + env(safe-area-inset-top)); }
  .hero2 h1 { font-size: clamp(60px, 6.8vw, 104px); line-height: .98; }
  .hero2 .fine { display: none; }
  /* Phone height follows the window height so the whole phone shows */
  .scene { --pw: clamp(170px, calc((100svh - 590px) / 1.99), 232px); --mw: clamp(120px, calc(var(--pw) * .78), 184px); --mw-big: var(--mw); }
  .hero2 .lede { max-width: 64ch; }
}
.hero2 .lede { text-wrap: balance; }

/* Promise line under the hero */
.promise-line { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 22px 20px; background: #1D1B40; color: var(--muted); font-size: 15px; font-weight: 700; }
.promise-line span { display: inline-flex; align-items: center; gap: 8px; }
.promise-line span::before { content: ""; width: 8px; height: 8px; background: var(--mint); }

/* Grow on scroll. The section is tall and the stage sticks while you
   scroll through it, so scrolling grows the companion one stage at a time. */
.grow { position: relative; height: 230vh; }
.grow-stick { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 72px 20px 24px; overflow: hidden; }
.grow h2 { max-width: 16ch; }
.picker { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.picker button { position: relative; overflow: hidden; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 2px var(--line); cursor: pointer; }
.picker button img { position: absolute; left: -23px; top: -51px; width: 93px; height: 93px; max-width: none; image-rendering: pixelated; }
.picker button[aria-pressed="true"] { background: var(--raised); box-shadow: inset 0 0 0 2px var(--accent); }
.stage-wrap { position: relative; width: min(340px, 74vw); aspect-ratio: 1; margin-top: 4px; }
.stage-wrap .pad { position: absolute; left: 10%; right: 10%; bottom: 3%; height: 10%; background: #2A2758; box-shadow: 0 6px 0 #1D1B40; }
.stage-wrap .pet { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; transition: transform .2s; }
.stage-wrap .pet.pop { animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes pop { 0% { transform: translateY(0) scale(.92); } 45% { transform: translateY(-18px) scale(1.04); } 100% { transform: none; } }
.burst { position: absolute; inset: 0; pointer-events: none; }
.burst i { position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; background: var(--amber); opacity: 0; }
.burst.go i { animation: spark .6s steps(6) forwards; }
@keyframes spark { 0% { opacity: 1; transform: translate(0,0); } 100% { opacity: 0; transform: translate(var(--x), var(--y)); } }
.lvl { font: 700 clamp(26px, 4vw, 36px)/1 var(--pixel); letter-spacing: .06em; color: var(--text); }
.lvl small { display: block; margin-top: 8px; font: 400 16px/1.4 var(--body); letter-spacing: 0; color: var(--muted); }
.xp { display: flex; gap: 6px; }
.xp i { width: clamp(40px, 9vw, 64px); height: 14px; background: var(--raised); }
.xp i.on { background: var(--mint); }
.grow .hint { font-size: 14px; color: var(--dim); }

/* Three feature cards, each with its own colour */
.feats { display: grid; gap: 16px; }
@media (min-width: 900px) { .feats { grid-template-columns: repeat(3, 1fr); } }
.feat { border-radius: 24px; padding: 28px 24px 32px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; color: #0E1020; position: relative; }
.feat.lift { background: var(--accent); }
.feat.run { background: var(--mint); }
.feat.fuel { background: var(--amber); }
.feat .tag { font: 700 16px/1 var(--pixel); letter-spacing: .08em; opacity: .7; }
.feat h3 { padding-right: 76px; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.1; letter-spacing: -0.02em; }
.feat p { font-size: 16px; line-height: 1.45; max-width: 34ch; }
.feat .shot { width: min(210px, 64%); margin: auto auto 0; padding-top: 22px; }
.feat .shot video { filter: drop-shadow(0 20px 26px rgba(0,0,0,.3)); }
.feat .icon { position: absolute; top: 22px; right: 22px; width: 64px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.25)); transform: rotate(8deg); }
.feat.fuel .icon { width: 30px; } .feat.run .icon { width: 70px; }
.feat .icon img { display: block; width: 100%; image-rendering: pixelated; }

/* Closing scene */
.end { margin-top: clamp(96px, 12vw, 160px); }
.end .inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: clamp(72px, 10vw, 120px) 20px 0; }
.end .lineup { height: clamp(220px, 22vw, 290px); margin-top: 24px; }
.end .crew { position: absolute; left: 0; right: 0; bottom: 46px; display: flex; justify-content: center; align-items: flex-end; gap: clamp(0px, 2vw, 32px); padding: 0 8px; z-index: 4; }
.end .crew .mate { position: relative; bottom: 0; flex: 0 1 auto; width: clamp(80px, 13vw, 180px); }
@media (max-width: 700px) { .end .crew { justify-content: space-evenly; gap: 0; } .end .crew .mate { width: calc((100vw - 16px) / 4); max-width: 120px; } .end .crew .mate.far { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .stk, .chip, .mate .bob, .stars i.t { animation: none !important; }
  .grow { height: auto; }
  .grow-stick { position: static; height: auto; padding: 96px 20px; }
}


/* Opening animation (every page load). A blue screen, a big phone rises
   part way up, a tap lands on BitRep and the site opens out of the icon
   like an iPhone app. Then the hero pieces drop into place. */
html.intro-on, html.intro-on body { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: var(--sky1); }
.i-phone { --iw: min(66vw, 500px); position: absolute; left: 50%; top: max(12vh, 64px); width: var(--iw); margin-left: calc(var(--iw) / -2);
  translate: 0 110vh; animation: i-rise .75s cubic-bezier(.22,1.25,.4,1) .12s forwards; }
@keyframes i-rise { to { translate: 0 0; } }
.i-tilt { transform: none; }
.i-screen { position: relative; aspect-ratio: 9 / 19.5; border-radius: calc(var(--iw) * .15); overflow: hidden; padding: 0;
  background: linear-gradient(170deg, #2A2370 0%, #4B3A9A 45%, #E28AA8 100%);
  box-shadow: 0 0 0 calc(var(--iw) * .03) #0B0C12, 0 0 0 calc(var(--iw) * .034) #3A3D4D, 0 50px 90px rgba(0,0,0,.55); }
.i-island { position: absolute; top: 2.4%; left: 50%; width: 30%; height: 4%; translate: -50% 0; background: #000; border-radius: 99px; }
.i-time { position: absolute; top: 3%; left: 9%; font: 700 calc(var(--iw) * .05)/1 -apple-system, "SF Pro Text", var(--body); color: #fff; }
.i-bars { position: absolute; top: 3.3%; right: 10%; display: flex; gap: 2px; align-items: flex-end; }
.i-bars i { width: calc(var(--iw) * .009); background: #fff; border-radius: 1px; }
.i-bars i:nth-child(1) { height: calc(var(--iw) * .012); } .i-bars i:nth-child(2) { height: calc(var(--iw) * .018); } .i-bars i:nth-child(3) { height: calc(var(--iw) * .024); } .i-bars i:nth-child(4) { height: calc(var(--iw) * .03); }
.i-grid { position: absolute; left: 6.5%; right: 6.5%; top: 16.5%; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--iw) * .06) calc(var(--iw) * .055); }
.i-app { display: flex; flex-direction: column; align-items: center; gap: calc(var(--iw) * .014); font: 500 calc(var(--iw) * .03)/1.1 -apple-system, "SF Pro Text", var(--body); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); white-space: nowrap; }
.i-app svg, .i-app img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 22.5%; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.i-app.br img { transition: transform .14s ease, filter .14s; }
.i-app.br.press img { transform: scale(.88); filter: brightness(.7); }
.i-dock { position: absolute; left: 3.5%; right: 3.5%; top: 74%; height: 12%; border-radius: calc(var(--iw) * .09); background: rgba(255,255,255,.22); backdrop-filter: blur(10px); display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--iw) * .055); padding: 0 5%; align-items: center; }
.i-dock svg { display: block; width: 100%; height: auto; border-radius: 22.5%; }
.i-tap { position: fixed; z-index: 110; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(255,255,255,.5); box-shadow: 0 0 0 2px rgba(255,255,255,.75); opacity: 0; pointer-events: none; }
.i-tap.on { animation: i-tap .4s ease-out forwards; }
@keyframes i-tap { 0% { opacity: 0; scale: 1.6; } 35% { opacity: 1; scale: .8; } 100% { opacity: 0; scale: 1.05; } }

/* While the intro runs, the site is a window that opens out of the icon */
html.pre #site { position: fixed; inset: 0; z-index: 200; overflow: hidden; clip-path: inset(50%); background: var(--sky1); }
html.pre .scene .phone, html.pre .scene .mate, html.pre .scene .stk, html.pre .scene .chip { opacity: 0; }

/* Landing: pieces drop into place, one after another */
html.land .scene .phone { animation: l-phone .7s cubic-bezier(.2,1.2,.4,1) both; animation-delay: 120ms; }
html.land .scene .mate { animation: l-fall .75s cubic-bezier(.3,1.35,.5,1) both; animation-delay: calc(var(--k) * 70ms); }
html.land .scene .stk, html.land .scene .chip { animation: l-pop .6s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--k) * 70ms); }
@keyframes l-up { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes l-phone { from { opacity: 0; translate: 0 140px; } to { opacity: 1; translate: 0 0; } }
@keyframes l-fall { from { opacity: 0; translate: 0 -60vh; } 60% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
@keyframes l-pop { from { opacity: 0; scale: .2; rotate: -40deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }

/* The phone clips are pictures that move, not players: no play button,
   no controls, even when the browser holds off on playing them. */
video.loop::-webkit-media-controls,
video.loop::-webkit-media-controls-start-playback-button,
video.loop::-webkit-media-controls-overlay-play-button,
video.loop::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; opacity: 0 !important; }
video.loop { pointer-events: none; }
/* Short laptop windows: smaller headline and phone so it all still fits */
@media (min-width: 701px) and (max-height: 800px) {
  .hero2 { padding-top: 76px; gap: 10px; }
  .hero2 h1 { font-size: clamp(44px, 7.4svh, 64px); }
  .hero2 .lede { font-size: 17px; }
  .scene { --pw: clamp(148px, calc((100svh - 470px) / 1.99), 200px); margin-top: 0; }
}