/* ============================================================
   RIMAN / DEV STUDIO — base layer
   ============================================================ */

:root{
  --bg:            #05060A;
  --bg-soft:       #080A11;
  --surface:       #0B0E16;
  --surface-2:     #0F131E;
  --line:          rgba(233,238,255,.09);
  --line-strong:   rgba(233,238,255,.18);
  --ink:           #EDF0F8;
  --ink-dim:       #A7B0C4;
  --ink-mute:      #7B8498;

  --cyan:          #4FF0E0;
  --cyan-deep:     #16C8C0;
  --violet:        #7C5CFF;
  --magenta:       #FF4FA3;
  --grad:          linear-gradient(100deg,#4FF0E0 0%,#7C5CFF 60%,#FF4FA3 100%);
  --grad-soft:     linear-gradient(140deg,rgba(79,240,224,.16),rgba(124,92,255,.16));

  --display: "Unbounded", "Manrope", system-ui, sans-serif;
  --body:    "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --pad-x: clamp(1.25rem, 5vw, 7rem);
  --sec-y: clamp(5rem, 12vw, 11rem);
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --ease: cubic-bezier(.22,1,.36,1);
  --ease-io: cubic-bezier(.65,.05,.36,1);
  --dur: .8s;

  --header-h: 82px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-color: rgba(233,238,255,.22) transparent;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(15px,.52vw + 13.6px,17.5px);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

body.is-loading{ overflow:hidden; height:100vh; }

img,svg,canvas,video{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }

::selection{ background:var(--cyan); color:#04121a; }

:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:6px;
}
.btn:focus-visible{ outline-offset:4px; border-radius:99px; }
.game:focus-visible{ outline-offset:-3px; border-radius:var(--r-lg); }
.skip{
  position:absolute; left:-9999px; top:0; z-index:9500;
  background:var(--cyan); color:#04121a; padding:.8rem 1.2rem;
  border-radius:0 0 8px 0; font-weight:700; font-size:.85rem;
}
.skip:focus{ left:0; }

h1,h2,h3,h4,h5{
  font-family:var(--display);
  font-weight:700;
  line-height:.98;
  letter-spacing:-.035em;
  margin:0;
  text-wrap:balance;
}

p{ margin:0; max-width:64ch; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:#05060A; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(#2a3145,#171b27);
  border-radius:99px;
  border:2px solid #05060A;
}
::-webkit-scrollbar-thumb:hover{ background:#3b4560; }

.wrap{
  width:100%;
  max-width:1560px;
  margin-inline:auto;
  padding-inline:var(--pad-x);
}
.section{ position:relative; padding-block:var(--sec-y); }

.mono{
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--ink-mute);
}
.grad-text{
  background:var(--grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.dim{ color:var(--ink-dim); }

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:2rem clamp(1rem,4vw,4rem);
  padding-bottom:clamp(2rem,4vw,3.5rem);
  border-bottom:1px solid var(--line);
  margin-bottom:clamp(2.5rem,5vw,4.5rem);
}
.sec-head__idx{
  display:flex; align-items:center; gap:.7rem;
  color:var(--ink-mute);
}
.sec-head__idx::before{
  content:""; width:34px; height:1px; background:var(--line-strong);
}
.sec-head h2{
  font-size:clamp(2.4rem,6.2vw,5.4rem);
  margin:.5rem 0 0;
}
.sec-head__meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:.4rem;
  text-align:right;
  color:var(--ink-mute);
  font-size:.86rem;
  max-width:34ch;
}
@media (max-width:780px){
  .sec-head{ grid-template-columns:1fr; }
  .sec-head__meta{ align-items:flex-start; text-align:left; }
}

/* motion primitives: data-anim="up|fade|clip|scale|mask-r" + optional --d delay */
[data-anim]{
  --d:0ms;
  transition:
    opacity 1s var(--ease) var(--d),
    transform 1.15s var(--ease) var(--d),
    clip-path 1.15s var(--ease) var(--d),
    filter 1s var(--ease) var(--d);
  will-change:opacity,transform;
}
[data-anim="up"]{ opacity:0; transform:translate3d(0,42px,0); }
[data-anim="down"]{ opacity:0; transform:translate3d(0,-28px,0); }
[data-anim="fade"]{ opacity:0; }
[data-anim="scale"]{ opacity:0; transform:scale(.94); }
[data-anim="clip"]{
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transform:translate3d(0,10px,0);
}
[data-anim="mask-r"]{ opacity:0; clip-path:inset(0 100% 0 0); }
[data-anim].is-in{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 0 0);
  filter:none;
}

.split{ display:inline; }
.split .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em; }
.split .ch{
  display:inline-block;
  transform:translate3d(0,108%,0) rotate(4deg);
  opacity:0;
  transition:transform .95s var(--ease), opacity .7s var(--ease);
  transition-delay:calc(var(--i) * 26ms + var(--dd,0ms));
  will-change:transform;
}
.split.is-in .ch{ transform:none; opacity:1; }

.stagger > *{ transition-delay:calc(var(--i,0) * 70ms); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-anim]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .split .ch{ opacity:1 !important; transform:none !important; }
}