/* ============================================================
   R2C GAMES — "under construction" / WIP splash
   Self-contained stylesheet sharing the studio brand DNA from
   assets/site.css: near-black surfaces · single amber accent ·
   0px radius (boxy) · 1px borders · glow not shadow ·
   Chakra Petch (display) + Inter (body).
   Entry reveals are pure-CSS keyframes (auto-play, no JS needed);
   JS only enhances (cursor parallax + rotating status line) so the
   page is fully readable with scripts disabled, and stays compatible
   with a strict CSP (no inline styles/scripts).
============================================================ */

:root{
  --bg:#0a0a0c;          /* page */
  --bg-1:#101013;        /* raised panels */
  --bg-2:#17171b;        /* sub-panels */
  --line:#232329;        /* hairlines */
  --line-2:#34343c;      /* stronger lines */
  --tx:#f3f1ea;          /* primary text (warm white) */
  --tx-dim:#b3b1aa;      /* body */
  --tx-mute:#6f6d68;     /* captions */

  --gold:#ffb627;
  --gold-2:#f5d547;
  --gold-soft:rgba(255,182,39,.14);

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --ease:cubic-bezier(.2,.7,.2,1);
  --font-disp:'Chakra Petch',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

/* ===== Reset ===== */
*{box-sizing:border-box}
*::before,*::after{box-sizing:border-box}
html{height:100%}
body{
  margin:0;min-height:100%;
  background:var(--bg);color:var(--tx);
  font-family:var(--font-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
h1{margin:0;font-weight:700}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid var(--bg)}

/* ===== Shell ===== */
.wip{
  --mx:50%; --my:30%;            /* cursor spotlight (set via JS) */
  --plx:0px; --ply:0px;          /* grid parallax offset (set via JS) */
  position:relative;min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;overflow:hidden;
}

/* ===== Animated background ===== */
.wip__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.wip__glow{        /* static amber glow up top */
  position:absolute;top:-15%;left:50%;transform:translateX(-50%);
  width:min(1100px,130%);height:80%;
  background:radial-gradient(closest-side,rgba(255,182,39,.16),transparent 70%);
  filter:blur(12px);
}
.wip__grid{        /* faint grid, parallaxes with the cursor */
  position:absolute;inset:-40px;opacity:.5;
  transform:translate3d(var(--plx),var(--ply),0);
  transition:transform .35s var(--ease);will-change:transform;
  background:
    repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 64px);
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 40%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse 78% 72% at 50% 40%,#000 35%,transparent 78%);
}
.wip__spot{        /* gold light that lifts the grid under the cursor */
  position:absolute;inset:0;opacity:0;
  transition:opacity .4s var(--ease);will-change:background,opacity;
  background:radial-gradient(300px 300px at var(--mx) var(--my),rgba(255,182,39,.16),transparent 70%);
}
.wip:hover .wip__spot{opacity:1}
.wip__scan{        /* slow gold sweep — a subtle "rendering" pass */
  position:absolute;left:0;right:0;top:-38vh;height:38vh;
  background:linear-gradient(180deg,transparent,rgba(255,182,39,.04) 55%,rgba(255,182,39,.11));
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 82%);
  mask-image:linear-gradient(180deg,transparent,#000 82%);
  animation:scan 8s var(--ease) infinite;
}
@keyframes scan{0%{transform:translateY(0)}100%{transform:translateY(165vh)}}

/* ===== Brand ===== */
.wip__top{position:relative;z-index:2;padding:var(--s6) var(--s5)}
.brand{display:inline-block;line-height:1;color:var(--tx);user-select:none}
.brand__mark{display:block;font-family:var(--font-disp);font-weight:700;font-size:24px;letter-spacing:.04em;color:#fff}
.brand__rule{display:block;height:1.5px;background:#fff;margin:4px 0 3px;opacity:.92;transition:background .25s}
.brand__sub{display:block;font-family:var(--font-disp);font-weight:600;font-size:10px;letter-spacing:.5em;text-align:center;padding-left:.5em;color:#fff;opacity:.92;transition:color .25s}
.brand:hover .brand__mark,.brand:hover .brand__sub{color:var(--gold)}
.brand:hover .brand__rule{background:var(--gold)}
.brand__mark{transition:color .25s}

/* ===== Main ===== */
.wip__main{position:relative;z-index:2;flex:1;display:flex;align-items:center;padding:var(--s6) var(--s5)}
.wip__inner{width:100%;max-width:820px;margin:0 auto;text-align:center}

/* status badge */
.wip__badge{
  display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:var(--s2);margin:0 0 var(--s4);max-width:100%;text-align:center;
  font-family:var(--font-disp);font-weight:600;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--gold);background:var(--gold-soft);padding:7px 14px;
  opacity:0;transform:translateY(14px);animation:rise .6s var(--ease) .05s forwards;
}
.wip__badge .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* kinetic headline — each line wipes up from behind a mask */
.wip__title{font-family:var(--font-disp);font-weight:700;font-size:clamp(28px,4.6vw,52px);line-height:1.06;letter-spacing:-.01em;overflow-wrap:break-word}
.wip__title .h-line{display:block;overflow:hidden;padding-bottom:.06em}
.wip__title .h-line__in{display:block;transform:translateY(110%);animation:line-in .8s var(--ease) forwards}
.wip__title .h-line:nth-child(1) .h-line__in{animation-delay:.15s}
.wip__title .h-line:nth-child(2) .h-line__in{animation-delay:.27s}
@keyframes line-in{to{transform:none}}
.wip__title .accent{position:relative;color:var(--gold)}
.wip__title .accent::after{
  content:"";position:absolute;left:0;right:0;bottom:.02em;height:2px;
  background:var(--gold);box-shadow:0 0 12px rgba(255,182,39,.4);
  transform:scaleX(0);transform-origin:left;
  animation:underline .7s var(--ease) .95s forwards;
}
@keyframes underline{to{transform:scaleX(1)}}

.wip__sub{
  margin:var(--s5) auto 0;max-width:56ch;
  font-size:clamp(16px,2.1vw,19px);color:var(--tx-dim);line-height:1.55;
  opacity:0;transform:translateY(16px);animation:rise .7s var(--ease) .4s forwards;
}
.wip__sub b{color:var(--tx);font-weight:600}

/* ===== Indeterminate build progress ===== */
.build{margin:var(--s6) auto 0;max-width:520px;text-align:left;opacity:0;transform:translateY(16px);animation:rise .7s var(--ease) .55s forwards}
.build__row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s1) var(--s3);margin-bottom:var(--s3);font-family:var(--font-disp);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.build__label{color:var(--tx-mute)}
.build__status{color:var(--gold);transition:opacity .25s var(--ease)}
.build__status.swap{opacity:0}
.build__bar{position:relative;height:6px;background:var(--bg-2);border:1px solid var(--line);overflow:hidden}
.build__fill{
  position:absolute;top:0;bottom:0;left:-45%;width:45%;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-2),var(--gold),transparent);
  box-shadow:0 0 16px rgba(255,182,39,.45);
  animation:indet 2.2s var(--ease) infinite;
}
@keyframes indet{0%{left:-45%;width:45%}50%{width:58%}100%{left:100%;width:45%}}

/* ===== Follow ===== */
.wip__follow{margin-top:var(--s6);opacity:0;transform:translateY(16px);animation:rise .7s var(--ease) .7s forwards}
.wip__follow-label{display:block;font-family:var(--font-disp);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--tx-mute);margin-bottom:var(--s4)}
.socials{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:center}
.social{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:11px 18px;border:1px solid var(--line-2);
  font-family:var(--font-disp);font-size:14px;letter-spacing:.1em;color:var(--tx-dim);
  transition:.2s var(--ease);
}
.social svg{width:20px;height:20px;display:block;flex:0 0 auto}
.social:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px);box-shadow:0 0 20px rgba(255,182,39,.18)}

@keyframes rise{to{opacity:1;transform:none}}

/* ===== Footer ===== */
.wip__foot{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;
  gap:var(--s2) var(--s4);justify-content:space-between;align-items:center;
  padding:var(--s5);border-top:1px solid var(--line);
  color:var(--tx-mute);font-size:13px;letter-spacing:.04em;
}
.wip__foot-tag{font-family:var(--font-disp);letter-spacing:.16em;text-transform:uppercase;font-size:12px}

/* ===== Responsive ===== */
@media (max-width:600px){
  body{font-size:16px}
  .wip__top{padding:var(--s5) var(--s4)}
  .wip__main{padding:var(--s5) var(--s4)}
  .wip__title{font-size:clamp(26px,7.4vw,40px)}
  .wip__badge{letter-spacing:.14em;font-size:11px;padding:6px 12px}
  .build{margin-top:var(--s6)}
  .build__row{font-size:11px;letter-spacing:.12em}
  .wip__follow{margin-top:var(--s6)}
  .wip__follow-label{letter-spacing:.2em}
  .social{padding:10px 14px;font-size:13px}
  .wip__foot{flex-direction:column;gap:var(--s2);text-align:center}
  .wip__foot-tag{letter-spacing:.08em}
}

/* ===== Reduced motion — kill movement, show everything ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .wip__grid{transform:none}
  .wip__spot,.wip__scan{display:none}
  .wip__title .h-line__in{transform:none}
  .wip__title .accent::after{transform:scaleX(1)}
  .wip__badge,.wip__sub,.build,.wip__follow{opacity:1;transform:none}
  .build__fill{left:0;width:55%}
  html{scroll-behavior:auto}
}