/* ============================================================
   rana studios — shared stylesheet
   ============================================================ */

/* ---------- fonts (self-hosted, latin + latin-ext) ---------- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/jetbrains-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/jetbrains-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/playfair-display-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/playfair-display-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/playfair-display-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(./fonts/playfair-display-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/press-start-2p-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/press-start-2p-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

/* ---------- reset ---------- */
*{ box-sizing:border-box; margin:0; padding:0; }

/* ---------- selection, per page ---------- */
.p-home ::selection { background:rgba(0,255,65,0.25); color:#eafff0; }
.p-crypto ::selection { background:rgba(216,142,63,0.28); color:#fbead0; }
.p-alp ::selection { background:rgba(212,175,55,0.28); color:#f6ecd4; }
.p-oc ::selection { background:rgba(255,140,61,0.3); color:#f5eeff; }
.p-about ::selection { background:rgba(0,255,65,0.25); color:#eafff0; }

/* ---------- keyframes carried over from the mockups ---------- */
@keyframes ranaBlink { 0%,49% { opacity:1 } 50%,100% { opacity:0 } }
@keyframes ranaGlow  { 0%,100% { opacity:0.5 } 50% { opacity:0.95 } }
@keyframes ranaScan  { 0% { transform:translateY(0) } 100% { transform:translateY(4px) } }
@keyframes ocBlink   { 0%,49% { opacity:1 } 50%,100% { opacity:0 } }
@keyframes ocGlow    { 0%,100% { opacity:0.5 } 50% { opacity:0.95 } }

/* ---------- hover states (were style-hover in the mockups) ---------- */
.hv-home-1:hover, .hv-home-1:focus-visible { color:#cdd4cb; }
.hv-home-2:hover, .hv-home-2:focus-visible { border-color:rgba(0,255,65,0.5); box-shadow:0 0 60px rgba(0,255,65,0.16); }
.hv-home-3:hover, .hv-home-3:focus-visible { border-color:rgba(0,255,65,0.5); box-shadow:0 0 40px rgba(0,255,65,0.12); }
.hv-home-4:hover, .hv-home-4:focus-visible { border-color:rgba(0,255,65,0.5); box-shadow:0 0 40px rgba(0,255,65,0.12); }
.hv-crypto-1:hover, .hv-crypto-1:focus-visible { color:#d8c6b3; }
.hv-crypto-2:hover, .hv-crypto-2:focus-visible { box-shadow:0 0 40px rgba(216,142,63,0.75); transform:translateY(-2px); }
.hv-crypto-3:hover, .hv-crypto-3:focus-visible { border-color:rgba(216,142,63,0.8); color:#fbead0; box-shadow:0 0 20px rgba(216,142,63,0.18); }
.hv-alp-1:hover, .hv-alp-1:focus-visible { color:#cfc4ae; }
.hv-alp-2:hover, .hv-alp-2:focus-visible { box-shadow:0 0 40px rgba(212,175,55,0.75); transform:translateY(-2px); }
.hv-alp-3:hover, .hv-alp-3:focus-visible { border-color:rgba(58,122,86,0.9); color:#f6ecd4; box-shadow:0 0 20px rgba(58,122,86,0.22); }
.hv-oc-1:hover, .hv-oc-1:focus-visible { color:#cabde0; }
.hv-oc-2:hover, .hv-oc-2:focus-visible { box-shadow:8px 8px 0 #a855f7; transform:translate(-3px,-3px); }
.hv-about-1:hover, .hv-about-1:focus-visible { color:#cdd4cb; }
.hv-about-2:hover, .hv-about-2:focus-visible { box-shadow:0 0 40px rgba(0,255,65,0.75); transform:translateY(-2px); }
.hv-about-3:hover, .hv-about-3:focus-visible { border-color:rgba(0,255,65,0.8); color:#eafff0; }
.hv-about-4:hover, .hv-about-4:focus-visible { border-color:rgba(0,255,65,0.8); color:#eafff0; }

/* ---------- keyboard focus ---------- */
a:focus-visible, button:focus-visible {
  outline:2px solid currentColor;
  outline-offset:3px;
}

/* ---------- footer contact link ---------- */
.mail {
  font-size:12px;
  letter-spacing:0.08em;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:1px;
  transition:color 0.2s;
}
.p-home .mail { color:#6b726a; }
.p-home .mail:hover, .p-home .mail:focus-visible { color:#eafff0; }
.p-crypto .mail { color:#8a7561; }
.p-crypto .mail:hover, .p-crypto .mail:focus-visible { color:#fbead0; }
.p-alp .mail { color:#7a7264; }
.p-alp .mail:hover, .p-alp .mail:focus-visible { color:#f6ecd4; }
.p-oc .mail { color:#7a6f8f; }
.p-oc .mail:hover, .p-oc .mail:focus-visible { color:#f5eeff; }
.p-about .mail { color:#6b726a; }
.p-about .mail:hover, .p-about .mail:focus-visible { color:#eafff0; }

/* ============================================================
   homepage splash
   ============================================================ */
#splash[hidden] { display:none !important; }

#splash {
  --eye: clamp(44px, 12vw, 74px);
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#050705;
  font-family:'JetBrains Mono', ui-monospace, monospace;
  opacity:1;
  transition:opacity 0.4s ease;
}
#splash.sp-out { opacity:0; pointer-events:none; }

.sp-noise {
  position:absolute; inset:-48px; z-index:0; pointer-events:none;
  opacity:.05; mix-blend-mode:screen;
  animation:spNoise 1.1s steps(3, end) infinite;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2"/><feColorMatrix type="matrix" values="0 0 0 0 0  0 1 0 0 0.25  0 0 0 0 0  0 0 0 0.6 0"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
}
.sp-wash {
  position:absolute; top:50%; left:50%; width:760px; height:760px;
  transform:translate(-50%, -50%); z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(0,255,65,0.10) 0%, rgba(0,255,65,0.03) 38%, rgba(0,0,0,0) 65%);
  animation:spPulse 4s ease-in-out infinite;
}
.sp-scan {
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  mix-blend-mode:multiply;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px, rgba(0,0,0,0.16) 3px, rgba(0,0,0,0) 4px);
}
.sp-stage {
  position:relative; z-index:2;
  width:min(560px, 92vw); height:min(380px, 60vh);
  display:flex; align-items:center; justify-content:center;
}
.sp-eyes {
  position:absolute; top:50%; left:50%; z-index:1;
  display:flex; gap:clamp(18px, 5vw, 30px);
  opacity:0;
  transform:translate(-50%, -50%);
  animation:spEyes 2.4s cubic-bezier(.22,1,.36,1) 1 forwards;
}
.sp-eye {
  width:var(--eye); height:var(--eye);
  border-radius:50%;
  background:#00ff41;
  box-shadow:0 0 30px rgba(0,255,65,0.6), 0 0 62px rgba(0,255,65,0.3);
  display:flex; align-items:center; justify-content:center;
}
.sp-eye-l { animation:spBlinkL 2.4s ease-in-out 1 forwards; }
.sp-eye-r { animation:spBlinkR 2.4s ease-in-out 1 forwards; }
.sp-pupil {
  width:70%; height:70%;
  border-radius:50%;
  background:#041008;
  animation:spPupil 2.4s ease-in-out 1 forwards;
}
.sp-title {
  position:relative; z-index:2;
  font-size:clamp(19px, 6.4vw, 36px);
  font-weight:500;
  letter-spacing:0.4em;
  padding-left:0.4em;
  white-space:nowrap;
  color:#e8efe6;
  text-shadow:0 0 18px rgba(0,255,65,0.22);
  opacity:0;
  animation:spTitle 2.4s ease 1 forwards;
}

/* the mockup ran this sequence over 9.5s on a loop; retimed to a single 2.4s play */
@keyframes spNoise {
  0%   { opacity:.045; transform:translate(0, 0); }
  25%  { opacity:.08;  transform:translate(-7px, 5px); }
  50%  { opacity:.035; transform:translate(5px, -7px); }
  75%  { opacity:.07;  transform:translate(-4px, -4px); }
  100% { opacity:.05;  transform:translate(3px, 3px); }
}
@keyframes spPulse { 0%,100% { opacity:.2 } 50% { opacity:.44 } }

@keyframes spTitle {
  0%     { opacity:0; }
  18.71% { opacity:1; }
  100%   { opacity:1; }
}
@keyframes spEyes {
  0%     { transform:translate(-50%, -50%); opacity:0; }
  22.22% { transform:translate(-50%, -50%); opacity:0; }
  45.62% { transform:translate(-50%, calc(-50% - var(--eye) * 1.3)); opacity:1; }
  100%   { transform:translate(-50%, calc(-50% - var(--eye) * 1.3)); opacity:1; }
}
@keyframes spPupil {
  0%     { transform:translateX(0) scale(0.13); }
  45.62% { transform:translateX(0) scale(0.13); }
  59.64% { transform:translateX(0) scale(1); }
  69.00% { transform:translateX(calc(var(--eye) * -0.162)) scale(1); }
  78.36% { transform:translateX(calc(var(--eye) *  0.162)) scale(1); }
  84.20% { transform:translateX(0) scale(1); }
  100%   { transform:translateX(0) scale(1); }
}
@keyframes spBlinkL {
  0%,85.56% { transform:scaleY(1); }
  87.56%     { transform:scaleY(0.06); }
  89.78%     { transform:scaleY(1); }
  100%       { transform:scaleY(1); }
}
@keyframes spBlinkR {
  0%,87.56% { transform:scaleY(1); }
  89.56%     { transform:scaleY(0.06); }
  91.78%     { transform:scaleY(1); }
  100%       { transform:scaleY(1); }
}

/* ---------- respect reduced motion everywhere ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}

/* ---------- 404 ---------- */
.hv-404:hover, .hv-404:focus-visible {
  border-color:rgba(0,255,65,0.8);
  box-shadow:0 0 24px rgba(0,255,65,0.16);
}