/* ============================================================
   PORTAL — shared styles for Remilton Martins sub-pages
   ============================================================ */

:root{
  --ink-0:  oklch(0.08 0.006 250);
  --ink-1:  oklch(0.11 0.008 250);
  --ink-2:  oklch(0.15 0.010 250);
  --ink-3:  oklch(0.22 0.012 250);
  --ink-4:  oklch(0.42 0.015 250);
  --fog:    oklch(0.72 0.012 250);
  --bone:   oklch(0.94 0.006 250);
  --accent: oklch(0.78 0.085 235);
  --accent-soft: oklch(0.78 0.085 235 / 0.18);
  --glass-edge: oklch(1 0 0 / 0.08);
  --glass-fill: oklch(0.18 0.01 250 / 0.32);
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--ink-0); }
body{
  min-height:100vh;
  color:var(--bone);
  font-family:'Space Grotesk', system-ui, sans-serif;
  font-weight:300;
  letter-spacing:0.01em;
  background:
    radial-gradient(1200px 800px at 20% 10%, oklch(0.18 0.02 235 / 0.55), transparent 60%),
    radial-gradient(900px 700px at 85% 90%, oklch(0.14 0.015 250 / 0.6), transparent 65%),
    radial-gradient(circle at 50% 55%, oklch(0.16 0.012 245), oklch(0.07 0.006 250) 70%);
  overflow-x:hidden;
  cursor:none;
}

/* ——— ambient layers ——— */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  opacity:0.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  background:radial-gradient(120% 90% at 50% 50%, transparent 55%, oklch(0 0 0 / 0.55) 100%);
}
#particles{ position:fixed; inset:0; z-index:0; pointer-events:none; }

/* warp veil — covers the whole stage in the final implosion frames */
.warp-veil{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 0%, transparent 30%, oklch(0 0 0 / 0.92) 70%);
  opacity:0;
  transition: opacity 700ms ease;
}
body.warping .warp-veil{ opacity:1; }

/* ——— header ——— */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 36px;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  background:linear-gradient(to bottom, oklch(0.08 0.006 250 / 0.55), oklch(0.08 0.006 250 / 0));
  border-bottom:1px solid var(--glass-edge);
}
.brand{
  display:flex; align-items:baseline; gap:12px;
  font-family:'Italiana', serif;
  font-size:20px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--bone);
  text-decoration:none;
  cursor:none;
}
.brand .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 14px var(--accent); display:inline-block; transform:translateY(-2px); }
.brand small{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:0.3em; color:var(--fog);
  text-transform:uppercase; margin-left:14px;
  padding-left:14px; border-left:1px solid var(--glass-edge);
}
a.brand:hover small{ color:var(--bone); }

.wa-btn{
  position:relative;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px 11px 14px;
  font-family:'Space Grotesk'; font-size:12px; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--bone); text-decoration:none;
  border:1px solid var(--glass-edge);
  border-radius:999px;
  background:linear-gradient(180deg, oklch(0.18 0.01 250 / 0.4), oklch(0.10 0.006 250 / 0.4));
  backdrop-filter:blur(8px);
  transition: border-color 320ms ease, transform 320ms ease, box-shadow 420ms ease;
  cursor:none;
}
.wa-btn svg{ width:16px; height:16px; }
.wa-btn::after{
  content:""; position:absolute; inset:-1px; border-radius:999px; pointer-events:none;
  box-shadow:0 0 0 0 var(--accent-soft);
  transition: box-shadow 520ms ease;
}
.wa-btn:hover{ border-color:oklch(0.78 0.085 235 / 0.7); transform:translateY(-1px); }
.wa-btn:hover::after{ box-shadow:0 0 32px 2px var(--accent-soft), inset 0 0 0 1px oklch(0.78 0.085 235 / 0.4); }
.wa-btn .ping{
  width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 12px var(--accent);
  animation:ping 2.4s ease-in-out infinite;
}
@keyframes ping{
  0%,100%{ opacity:0.4; transform:scale(0.9); }
  50%{ opacity:1; transform:scale(1.15); }
}

/* ——— corner glyphs ——— */
.corner{
  position:fixed; z-index:20;
  font-family:'JetBrains Mono', monospace;
  font-size:9px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--fog);
  pointer-events:none;
}
.corner.tl{ top:96px; left:36px; }
.corner.bl{ bottom:84px; left:36px; }
.corner.br{ bottom:84px; right:36px; text-align:right; }
.corner small{ display:block; color:oklch(0.55 0.01 250); margin-top:6px; }

/* ——— page stage (sub-page) ——— */
.page-stage{
  position:relative; z-index:10;
  min-height:100vh;
  padding:120px 36px 100px;
}

.title-stack{
  position:relative; z-index:15;
  display:flex; align-items:center; gap:32px;
  margin-top:48px;
}
.page-blob{
  position:relative;
  width:128px; height:128px; flex:0 0 128px;
  filter: drop-shadow(0 14px 36px oklch(0 0 0 / 0.6)) drop-shadow(0 0 32px oklch(0.78 0.085 235 / 0.18));
  transform-origin: center center;
  /* enter transition: from --enter-transform back to identity */
  transition: transform 1200ms cubic-bezier(.7,.05,.2,1);
}
body.entering .page-blob{
  transform: var(--enter-transform, none);
}
.page-blob svg{
  width:100%; height:100%;
  display:block;
}

.title-body{
  display:flex; flex-direction:column; gap:10px;
}
.page-id{
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--fog);
  display:flex; align-items:center; gap:14px;
  opacity:0;
  transition: opacity 600ms ease 900ms;
}
.page-id b{ color:var(--accent); font-weight:400; }
.page-id .bar{ width:36px; height:1px; background:var(--glass-edge); }
body:not(.entering) .page-id{ opacity:1; }

.page-title{
  margin:0;
  font-family:'Pinyon Script', cursive;
  font-weight:400;
  color:var(--bone);
  font-size: clamp(56px, 9vmin, 112px);
  line-height:0.95; letter-spacing:0.005em;
  text-shadow: 0 0 28px oklch(0.85 0.08 235 / 0.32), 0 2px 1px oklch(0 0 0 / 0.6);
  opacity:0;
  transform: translateX(-18px);
  transition: opacity 800ms ease 1050ms, transform 1000ms cubic-bezier(.2,.7,.2,1) 1050ms;
}
body:not(.entering) .page-title{ opacity:1; transform: translateX(0); }

/* meta line under title */
.title-meta{
  position:relative; z-index:15;
  margin-top:36px;
  display:flex; align-items:center; gap:18px;
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:0.4em; text-transform:uppercase;
  color:var(--fog);
  opacity:0;
  transition: opacity 700ms ease 1400ms;
}
body:not(.entering) .title-meta{ opacity:1; }
.title-meta .line{ flex:0 0 160px; height:1px; background:var(--glass-edge); }
.title-meta b{ color:var(--bone); font-weight:400; }

/* a back chip (also a home-warp trigger) */
.back-chip{
  position:fixed; z-index:25;
  top:96px; right:36px;
  display:inline-flex; align-items:center; gap:10px;
  padding:9px 14px;
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--fog); text-decoration:none;
  background:linear-gradient(180deg, oklch(0.18 0.01 250 / 0.4), oklch(0.10 0.006 250 / 0.35));
  border:1px solid var(--glass-edge);
  border-radius:999px;
  backdrop-filter:blur(8px);
  transition: color 320ms ease, border-color 320ms ease, transform 320ms ease;
  cursor:none;
}
.back-chip:hover{ color:var(--bone); border-color:oklch(0.78 0.085 235 / 0.6); transform:translateY(-1px); }
.back-chip .arrow{ width:18px; height:1px; background:currentColor; position:relative; }
.back-chip .arrow::before{
  content:""; position:absolute; left:0; top:50%;
  width:7px; height:7px; border-left:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}

/* ——— footer ——— */
footer{
  position:relative; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:28px 36px 30px;
  border-top:1px solid var(--glass-edge);
  background:linear-gradient(to top, oklch(0.06 0.006 250 / 0.7), transparent);
  font-family:'JetBrains Mono', monospace;
  font-size:10px; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--fog);
}
footer .l, footer .r{ display:flex; gap:18px; align-items:center; }
footer .sep{ width:24px; height:1px; background:var(--glass-edge); }
footer b{ color:var(--bone); font-weight:400; letter-spacing:0.32em; }

/* ——— custom cursor ——— */
.cursor, .cursor-ring{
  position:fixed; top:0; left:0; pointer-events:none; z-index:200;
  transform:translate(-50%,-50%);
}
.cursor{ width:5px; height:5px; background:var(--bone); border-radius:50%; mix-blend-mode:difference; }
.cursor-ring{
  width:34px; height:34px; border:1px solid oklch(1 0 0 / 0.5); border-radius:50%;
  transition: width 220ms ease, height 220ms ease, border-color 280ms ease, transform 80ms linear;
}
body.over-link .cursor-ring{ width:46px; height:46px; border-color:var(--accent); }

/* ——— responsive ——— */
@media (max-width: 760px){
  body{ cursor:auto; }
  .cursor, .cursor-ring{ display:none; }
  .nav{ padding:16px 18px; }
  .brand small{ display:none; }
  .corner{ display:none; }
  .back-chip{ top:auto; bottom:84px; right:18px; }
  .page-stage{ padding:110px 22px 90px; }
  .title-stack{ flex-direction:column; align-items:flex-start; gap:18px; }
  .page-blob{ width:96px; height:96px; flex-basis:96px; }
  .title-meta .line{ flex-basis:60px; }
  footer{ padding:18px 18px 22px; flex-direction:column; gap:10px; text-align:center; }
}