/* The Rotbox phone: an iPhone drawn in CSS (420 × 880 pt outside, a 393 × 853 pt screen), tilted a few degrees,
   with two stickers pointing at the feed and the game. Used by the home page and /download.
   A page sets --pw (the phone's width) on .rig. Everything inside is in points (--u), so the screen reads like a real
   capture at any size and its text is laid out at the size it is drawn (sharp, never a scaled bitmap).
   Inside the screen the layout follows PlayExperience: feed on top (51%), a 10 pt divider, the game below. */
@property --pw{syntax:'<length>';inherits:true;initial-value:300px}
@property --u{syntax:'<length>';inherits:true;initial-value:.714px}

.rig{--u:calc(var(--pw) / 420);position:relative;width:var(--pw);height:calc(var(--pw) * 44 / 21);flex:none;text-align:left}
/* Each game's two colours (body[data-game]), for the light behind the phone. */
@property --g1{syntax:'<color>';inherits:true;initial-value:#29c2e0}
@property --g2{syntax:'<color>';inherits:true;initial-value:#7ddc7a}
body{--g1:#29c2e0;--g2:#7ddc7a;transition:--g1 1.4s ease,--g2 1.4s ease}
body[data-game="drift"]{--g1:#ff2e88;--g2:#20d4ff}
body[data-game="surf"]{--g1:#ff9a6a;--g2:#2fd6e0}
body[data-game="parkour"]{--g1:#5aa2ff;--g2:#a98bff}
body[data-game="plow"]{--g1:#9be25a;--g2:#ffd34a}
body[data-game="ramp"]{--g1:#4dabff;--g2:#ffb36b}
body[data-game="slope"]{--g1:#ffc49a;--g2:#8fb4ff}
/* The game's light, very soft, behind the phone. Gradients only: no blur filter to pay for on phones. */
.glow{position:absolute;z-index:0;inset:-12% -70%;pointer-events:none;opacity:.2;
  background:radial-gradient(closest-side at 40% 40%,var(--g1),transparent),radial-gradient(closest-side at 62% 66%,var(--g2),transparent);
  transition:opacity 1.2s ease}
.tilt{position:absolute;z-index:1;inset:0;transform:rotate(2.2deg)}
/* The tilt is 2D on purpose: a 3D (perspective) layer is sampled as a bitmap and blurs the screen's text.
   The depth comes from the frame instead: its left side and bottom edge show, lit from the top right. */
.rise .tilt{animation:tiltIn 1.1s var(--settle) backwards}
@keyframes tiltIn{from{opacity:0;transform:translateY(5%) rotate(5deg) scale(.97)}}

/* ---------- hardware ---------- */
.device{position:absolute;inset:0;border-radius:calc(69 * var(--u));padding:calc(3.4 * var(--u));
  background:linear-gradient(150deg,#9a9aa1 0%,#3a3a3f 11%,#1b1b1e 34%,#2b2b2f 58%,#505056 76%,#161618 100%);
  box-shadow:inset 0 0 0 calc(.7 * var(--u)) rgba(255,255,255,.28),0 0 0 1px rgba(0,0,0,.85),
    calc(-18 * var(--u)) calc(46 * var(--u)) calc(90 * var(--u)) calc(-10 * var(--u)) rgba(0,0,0,.85)}
.device::before{content:"";position:absolute;z-index:-2;inset:0;border-radius:inherit;transform:translate(calc(-5 * var(--u)),calc(4 * var(--u)));
  background:linear-gradient(160deg,#5b5b61,#232326 30%,#0e0e10 70%,#2a2a2e);box-shadow:0 0 0 1px rgba(0,0,0,.7)}
.key{position:absolute;z-index:-1;width:calc(4 * var(--u));border-radius:calc(2 * var(--u));background:linear-gradient(90deg,#161618,#6a6a70 50%,#232326)}
.key.k1{left:calc(-2.6 * var(--u));top:calc(168 * var(--u));height:calc(30 * var(--u))}
.key.k2{left:calc(-2.6 * var(--u));top:calc(232 * var(--u));height:calc(60 * var(--u))}
.key.k3{left:calc(-2.6 * var(--u));top:calc(306 * var(--u));height:calc(60 * var(--u))}
.key.k4{right:calc(-2.6 * var(--u));top:calc(262 * var(--u));height:calc(96 * var(--u))}
.bezel{position:relative;height:100%;border-radius:calc(65.6 * var(--u));padding:calc(10.1 * var(--u));background:#000;box-shadow:inset 0 0 0 calc(1.2 * var(--u)) #0c0c0e}
.screen{position:relative;height:100%;overflow:hidden;isolation:isolate;background:#000;
  border-radius:calc(55.5 * var(--u));clip-path:inset(0 round calc(55.5 * var(--u)))}
/* A whisper of glass. */
.screen::after{content:"";position:absolute;z-index:20;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.09),rgba(255,255,255,0) 34%)}
.status{position:absolute;z-index:9;inset:0 0 auto;height:calc(58 * var(--u));display:flex;align-items:center;justify-content:space-between;
  padding:calc(3 * var(--u)) calc(31 * var(--u)) 0 calc(50 * var(--u));font:600 calc(17 * var(--u))/1 var(--text);letter-spacing:-.02em;color:#fff;pointer-events:none}
.status>span:last-child{display:flex;align-items:center;gap:calc(5.5 * var(--u))}
.status svg{height:calc(12 * var(--u));width:auto;display:block}
.status .batt{height:calc(13 * var(--u))}
.island{position:absolute;z-index:10;top:calc(11 * var(--u));left:50%;width:calc(125 * var(--u));height:calc(37 * var(--u));margin-left:calc(-62.5 * var(--u));border-radius:99px;background:#000}
.homebar{position:absolute;z-index:14;left:50%;bottom:calc(8 * var(--u));width:calc(134 * var(--u));height:calc(5 * var(--u));margin-left:calc(-67 * var(--u));border-radius:99px;background:rgba(255,255,255,.92);pointer-events:none}

/* ---------- the split (PlayExperience: feed 25–70%, starts at 51%, 10 pt divider) ---------- */
.split{--split:.51;position:absolute;inset:0;display:grid;grid-template-rows:calc((100% - 10 * var(--u)) * var(--split)) calc(10 * var(--u)) minmax(0,1fr)}
.split.snap{transition:grid-template-rows .45s var(--settle)}
.split.dragging,.split.dragging *{cursor:row-resize!important;user-select:none;-webkit-user-select:none}
.split.dragging iframe{pointer-events:none}

.feed{position:relative;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;background:#000}
/* Reels that loop, as the app's feed plays them: each first frame is there at once (the poster), then the video. Swipe, drag or scroll for the next. */
.reel-list{position:absolute;inset:0;margin:0;padding:0;list-style:none;transition:transform .42s var(--settle)}
.reel-list.jump{transition:none}
.reel-list li{position:relative;height:100%;overflow:hidden;background:#000}
.clip{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.32),rgba(0,0,0,0) 28%,rgba(0,0,0,0) 52%,rgba(0,0,0,.55))}

/* Header as in the app: the platform's name at the left, like and share in one capsule at the right. */
.feed-top{position:absolute;z-index:3;top:calc(54 * var(--u));left:calc(12 * var(--u));right:calc(12 * var(--u));height:calc(36 * var(--u));display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.feed-top .name{padding:0 calc(6 * var(--u));font:600 calc(24 * var(--u))/1 var(--round);letter-spacing:-.05em;color:#fff;text-shadow:0 calc(2 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.45)}
.acts{display:flex;height:100%;border-radius:99px;background:rgba(0,0,0,.35);pointer-events:auto}
.acts button{position:relative;width:calc(38 * var(--u));height:100%;display:grid;place-items:center;border-radius:99px}
.acts svg{width:calc(17 * var(--u));height:calc(17 * var(--u));overflow:visible}
.like .fill{opacity:0;transition:opacity .15s}
.like[aria-pressed="true"] .fill{opacity:1}
.like.pop svg{animation:pop .45s var(--spring)}
@keyframes pop{0%{transform:scale(.7)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.like .ring{position:absolute;inset:calc(4 * var(--u));border-radius:50%;border:max(1px,calc(1.4 * var(--u))) solid #fff;opacity:0;pointer-events:none}
.like.pop[aria-pressed="true"] .ring{animation:ring .55s ease-out}
@keyframes ring{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.7)}}
.meta{position:absolute;z-index:2;left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(16 * var(--u));display:grid;gap:calc(5 * var(--u));color:#fff;font:400 calc(12 * var(--u))/1.25 var(--text);pointer-events:none;text-shadow:0 1px calc(6 * var(--u)) rgba(0,0,0,.35)}
.meta .handle{justify-self:start;font-weight:600;font-size:calc(13 * var(--u));color:#fff;text-decoration:none;pointer-events:auto}
.meta .handle:hover{text-decoration:underline}
.meta span{color:rgba(255,255,255,.88);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress{position:absolute;z-index:2;left:0;right:0;bottom:0;height:max(1px,calc(1.6 * var(--u)));background:rgba(255,255,255,.12)}
.progress i{position:absolute;inset:0;background:rgba(255,255,255,.8);transform-origin:left;transform:scaleX(0)}

.divider{position:relative;z-index:6;background:#000;touch-action:none;outline:none;cursor:row-resize}
.divider::after{content:"";position:absolute;left:0;right:0;top:calc(-12 * var(--u));bottom:calc(-12 * var(--u))}
.divider .pill{position:absolute;left:50%;top:50%;width:calc(28 * var(--u));height:max(1.5px,calc(2 * var(--u)));margin:calc(-1 * var(--u)) 0 0 calc(-14 * var(--u));border-radius:99px;background:rgba(255,255,255,.35);pointer-events:none;transition:width .3s var(--spring),margin .3s var(--spring),background .2s}
.divider:hover .pill,.split.dragging .pill,.divider:focus-visible .pill{width:calc(48 * var(--u));margin-left:calc(-24 * var(--u));background:rgba(255,255,255,.8)}

.game{position:relative;overflow:hidden;background:#101012}
.poster,.game iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.poster{object-fit:cover;transition:opacity .7s ease-out}
.game iframe{opacity:0;transition:opacity .7s ease-out;background:transparent}
.game.live iframe{opacity:1}
.game.live .poster{opacity:0}
.game.fallback iframe{display:none}
.game.fallback .poster{opacity:1;animation:pan 26s ease-in-out infinite alternate}
@keyframes pan{from{transform:scale(1.1) translate(-2.5%,-1.5%)}to{transform:scale(1.1) translate(2.5%,1.5%)}}
/* The carousel (site.js): the next game loads in a hidden frame; its cover fades in over the game, slowly moving
   (on the compositor, so it keeps moving while the game builds underneath), and fades out onto the running game. */
.game iframe.next{opacity:0;pointer-events:none}
.game.over .poster{z-index:2;transition:opacity .5s ease-in-out;animation:push 8s cubic-bezier(.3,.5,.4,1) both}
.game.cover .poster{opacity:1}
@keyframes push{from{transform:scale(1.001)}to{transform:scale(1.08)}}
/* The app's chrome capsules (RotChrome compact: 30 pt, 12 pt medium, black 35%). */
.cap{display:inline-flex;align-items:center;gap:calc(6 * var(--u));height:calc(30 * var(--u));padding:0 calc(10 * var(--u));border-radius:99px;background:rgba(0,0,0,.35);color:#fff;font:500 calc(12 * var(--u))/1 var(--text);white-space:nowrap}
.cap svg{flex:none}
.hint{position:absolute;z-index:3;left:0;right:0;bottom:calc(30 * var(--u));display:flex;justify-content:center;pointer-events:none;transition:opacity .6s}
.hint .cap{height:calc(32 * var(--u));padding:0 calc(14 * var(--u));font-size:calc(13 * var(--u))}
.game.quiet .hint{opacity:0}


/* ---------- launch: RotLaunchOverlay (tracking +4 → −3, three dots, shutters open on the divider) ---------- */
.intro{position:absolute;inset:0;z-index:30;pointer-events:none}
.intro .sh{position:absolute;left:0;right:0;background:#000;transition:transform .85s var(--inout)}
.intro .sh.t{top:0;height:51%}
.intro .sh.b{top:calc(51% - 1px);bottom:0}
.intro .mark{position:absolute;left:0;right:0;top:calc(51% - 22 * var(--u));transform:translateY(-50%);display:grid;justify-items:center;gap:calc(20 * var(--u));transition:opacity .55s var(--inout),transform .85s var(--inout)}
.intro .wm{font-size:calc(56 * var(--u));letter-spacing:.07em;transform:scale(.88);opacity:0;transition:letter-spacing 1s var(--settle),transform .9s var(--spring),opacity .45s ease-out}
.intro.in .wm{letter-spacing:-.047em;transform:none;opacity:1}
.dots{display:flex;gap:calc(6 * var(--u))}
.dots i{width:calc(3 * var(--u));height:calc(3 * var(--u));border-radius:50%;background:#fff;opacity:.25;animation:dot 1.57s ease-in-out infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes dot{50%{opacity:.85}}
.intro.open .sh.t{transform:translateY(-100%)}
.intro.open .sh.b{transform:translateY(100%)}
.intro.open .mark{opacity:0;transform:translateY(-50%) scale(1.12)}
.intro.open .dots i{animation:none;opacity:.5}

/* ---------- stickers: a pink "Watch Reels" at the feed, a yellow "Play Games" at the game ---------- */
.sticker{position:absolute;z-index:4;pointer-events:none;transform:rotate(var(--r));transition:opacity .3s ease;font:900 var(--sticker,17px)/1 var(--heavy);letter-spacing:-.025em;color:#170a10;white-space:nowrap}
.sticker>span{position:relative;z-index:1;display:block;padding:.46em .84em .5em;border-radius:99px;background:var(--c);
  box-shadow:inset 0 .07em 0 rgba(255,255,255,.45),inset 0 -.1em 0 rgba(0,0,0,.1),0 .1em .2em rgba(0,0,0,.25),0 .6em 1.6em rgba(0,0,0,.45)}
.sticker svg{position:absolute;overflow:visible;fill:none;stroke:var(--c);stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 .08em .18em rgba(0,0,0,.45))}
/* They hang off the phone's edges by a share of their own size, so they sit the same at every width: the pink one
   between the feed's words and its caption, the yellow one over the game's right bank. */
.sticker.reels{--c:#ed6893;--r:-8deg;left:-2.3em;top:32%}
.sticker.play{--c:#fae268;--r:6deg;right:-2.1em;top:64%}
.sticker.reels svg{width:3.2em;height:3.1em;left:.4em;bottom:calc(100% - .1em)}
.sticker.play svg{width:3em;height:3.2em;right:1em;top:calc(100% - .05em)}
/* Pop in, then draw the arrows. */
.rise .sticker{animation:stick .5s var(--spring) backwards}
.rise .sticker.reels{animation-delay:.2s}
.rise .sticker.play{animation-delay:.3s}
@keyframes stick{from{opacity:0;transform:rotate(calc(var(--r) * 2.4)) scale(.55)}to{opacity:1;transform:rotate(var(--r)) scale(1)}}
.rise .sticker path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .32s var(--settle) forwards}
.rise .sticker.reels path{animation-delay:.4s}.rise .sticker.reels path+path{animation-delay:.68s;animation-duration:.16s}
.rise .sticker.play path{animation-delay:.5s}.rise .sticker.play path+path{animation-delay:.78s;animation-duration:.16s}
@keyframes draw{to{stroke-dashoffset:0}}

@media (prefers-reduced-motion:reduce){
  .rise .tilt,.rise .sticker{animation:none}
  .rise .sticker path{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
  .intro .sh,.intro .mark,.intro .wm{transition:opacity .2s linear}
  .intro .wm{letter-spacing:-.047em;transform:none}
  .intro.open .sh.t,.intro.open .sh.b{transform:none;opacity:0}
  .intro.open .mark{transform:translateY(-50%)}
  .dots i{animation:none;opacity:.5}
  .split.snap,.reel-list{transition:none}
  .progress{display:none}
  .game.fallback .poster{animation:none}
  .game.over .poster{animation:none;transition:none}
}