/* ============================================================================
   r3.css — ParsaDev homepage Rev 3 OVERLAY
   ----------------------------------------------------------------------------
   Loads AFTER /assets/css/style.css. The whole page (masthead, mega-menus,
   drawer, cards, work grid, footer, buttons, theme + night-mode controls) is the
   CURRENT site, unchanged and fully theme-aware. This file adds only:
     1. the Dala "brain" particle background (canvas, positioned behind content)
     2. a Dala-style hero — massive weightless Inter type on the void
   Everything is token-driven (--bg/--ink/--primary/--gold/--accent...) so it
   recolours with all 6 palettes and inverts with Auto/Off/On night mode.
   ============================================================================ */

/* Inter — the Dala substitute face, self-hosted, for the hero only */
@font-face{
  font-family:'InterR3';
  font-style:normal;font-weight:200 700;font-display:swap;
  src:url('/assets/fonts/inter-var.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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- per-section particle canvases: one canvas inside each section, behind its
        content (above the section's own background). Robust: no fixed negative-z. */
[data-r3obj]{position:relative;}
.r3objcanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;}
[data-r3obj] > .container,
[data-r3obj] > .r3hero__scrollcue{position:relative;z-index:1;}

/* ---- Card sections: frosted glossy-transparent cards over the particle canvas —
        the same theme as r2's cinematic-background home (body.has-bg3d). ---- */
[data-r3obj].section--sunk{background:transparent;}
[data-r3obj] .card,
[data-r3obj] .pcard{                                 /* .pcard = the "Selected work" portfolio cards — same glass as .card */
  background:color-mix(in srgb,var(--surface) 58%,transparent);
  backdrop-filter:blur(7px) saturate(1.3);-webkit-backdrop-filter:blur(7px) saturate(1.3);
  border-color:color-mix(in srgb,#ffffff 24%,var(--border));
}
[data-r3obj] .card__band,
[data-r3obj] .pcard__media{border-bottom-color:color-mix(in srgb,#ffffff 18%,var(--border));}

/* ---- "Selected work": cards on the LEFT (as usual content), brain on the RIGHT (CFG side 0.80) —
        separated, scaling with window width. In the deck, left-align this panel so its cards
        stay left too (instead of centred), matching the vertical layout. Only this section. ---- */
body.hx-on .hx__panel[data-r3obj="brain"]{align-items:flex-start;}

/* ---- Theme button in the masthead (between night toggle and Start-a-project) ---- */
.mast .nm{order:0;}
.mast .r3-theme{order:1;}
.mast .mast__cta{order:2;}                 /* style.css sets order:1; push CTA to the far right */
/* Mobile: keep "Start a project" visible and put the menu (hamburger) on the far right after it;
   hide the theme + night-mode controls there so the row fits (they stay on desktop). */
@media (max-width:880px){
  .mast .mast__cta{display:inline-flex;order:1;margin-left:auto;}
  .mast .r3-theme,.mast .nm{display:none;}
  .mast .navtoggle{order:2;margin-left:.5rem;}
}
.r3-theme{position:relative;display:inline-flex;align-items:center;}
.r3-theme__btn{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;cursor:pointer;padding:9px;border-radius:999px;color:var(--ink);transition:background-color .18s;}
.r3-theme__btn:hover{background:color-mix(in oklab,var(--ink) 8%,transparent);}
.r3-theme__dots{display:inline-flex;gap:3px;}
.r3-theme__dots i{width:9px;height:9px;border-radius:999px;display:block;}
.r3-theme__dots i:nth-child(1){background:var(--primary);}
.r3-theme__dots i:nth-child(2){background:var(--gold);}
.r3-theme__dots i:nth-child(3){background:var(--accent);}
.r3-theme__pop{
  position:absolute;top:calc(100% + 12px);right:0;z-index:200;
  width:min(300px,calc(100vw - 28px));
  max-height:min(76vh,640px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:12px;
  box-shadow:0 26px 64px -22px color-mix(in oklab,var(--ink) 45%,transparent);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease);
}
.r3-theme__pop[data-open="true"]{opacity:1;transform:none;pointer-events:auto;}
.r3-theme__pop .theme-switch{display:grid;gap:4px;}

/* ============================================================================
   DALA HERO
   ============================================================================ */
.r3hero{
  position:relative;
  min-height:calc(100vh - 68px);
  min-height:calc(100svh - 68px);
  display:flex;align-items:center;
  padding-block:clamp(48px,9vh,120px);
  overflow:hidden;
}
.r3hero__grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.9fr);
  gap:clamp(24px,5vw,64px);align-items:center;width:100%;
}
.r3hero__brainspace{min-height:min(60vh,520px);}   /* reserves the brain's column on desktop */

.r3hero__copy{max-width:44rem;}
.r3hero__copy .r3hero__eyebrow{
  font-family:var(--font-hero,'InterR3',ui-sans-serif,system-ui,sans-serif);
  display:inline-block;color:var(--primary);
  font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:1.3rem;
}
.r3hero__title{
  font-family:var(--font-hero,'InterR3',ui-sans-serif,system-ui,-apple-system,sans-serif);
  font-weight:400;                       /* Dala: hierarchy by scale, not weight */
  font-size:clamp(2.7rem,1.1rem + 7.4vw,6.2rem);
  line-height:1.02;letter-spacing:-0.04em;
  color:var(--ink);margin:0 0 1.5rem;max-width:15ch;
  font-feature-settings:"ss01" 1;text-wrap:balance;
}
.r3hero__accent{color:var(--primary);}
.r3hero__lede{
  font-family:var(--font-hero,'InterR3',ui-sans-serif,system-ui,sans-serif);
  font-weight:300;                        /* airy body (Dala signature) */
  font-size:clamp(1.05rem,1rem + .45vw,1.3rem);line-height:1.6;
  color:var(--ink-muted);max-width:46ch;margin:0 0 2rem;
}
.r3hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:clamp(24px,4vh,44px);}
.r3hero__stats{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,52px);}
.r3hero__stat b{
  font-family:var(--font-hero,'InterR3',ui-sans-serif,system-ui,sans-serif);
  display:block;font-weight:400;font-size:clamp(1.9rem,1.4rem + 2vw,3rem);
  letter-spacing:-0.03em;line-height:1;color:var(--ink);
}
.r3hero__stat span{
  display:block;margin-top:.5rem;font-size:.78rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);
}
.r3hero__scrollcue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  font-family:var(--font-hero,'InterR3',sans-serif);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);
  opacity:.7;
}
.r3hero__scrollcue::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:linear-gradient(var(--ink-faint),transparent);}

@media (max-width:900px){
  .r3hero__grid{grid-template-columns:1fr;}
  .r3hero__brainspace{display:none;}      /* brain re-centres behind the copy on mobile (JS) */
  .r3hero{min-height:calc(100svh - 60px);}
  .r3hero__copy{max-width:100%;}
}
@media (prefers-reduced-motion: reduce){
  #r3-bg,.r3-theme__pop{transition:none;}
  .r3hero__scrollcue{display:none;}
}

/* ---- Horizontal-scroll deck: the brain hero uses .r3hero (not r2's .hero), so it needs
        its own panel sizing. Card panels inherit r2's body.hx-on rules automatically. ---- */
body.hx-on .hx__panel.r3hero{align-items:stretch;justify-content:center;min-height:0;padding:88px 4vw 2rem;}
body.hx-on .hx__panel.r3hero > .container{width:min(1180px,92vw);max-width:none;}
body.hx-on .r3hero{min-height:0;}
body.hx-on .r3hero__grid{align-items:center;height:100%;}
body.hx-on .r3hero__brainspace{min-height:min(52vh,460px);}
body.hx-on .r3hero__scrollcue{display:none;}      /* the deck has its own "scroll" affordance */
/* Deck panels are a fixed 100vh, so compact the hero (smaller title + tighter gaps) so the
   stats row stays on-screen instead of being clipped below the fold. */
body.hx-on .hx__panel.r3hero .r3hero__eyebrow{margin-bottom:0.8rem;}
body.hx-on .hx__panel.r3hero .r3hero__title{font-size:clamp(2.1rem,1rem + 4.4vw,4.4rem);margin-bottom:0.9rem;}
body.hx-on .hx__panel.r3hero .r3hero__lede{margin-bottom:1rem;}
body.hx-on .hx__panel.r3hero .r3hero__actions{margin-bottom:1.2rem;}
body.hx-on .hx__panel.r3hero .r3hero__stat b{font-size:clamp(1.5rem,1.1rem + 1.2vw,2.3rem);}

/* ---- Laptop mockup (copied from r2's hero): sit it inside the r3 hero's right column
        instead of r2's absolute bottom-right; keep it visible on mobile below the copy. ---- */
.r3hero .r3hero__brainspace{display:flex;align-items:center;justify-content:center;}
.r3hero .hero__mbp{position:relative;right:auto;bottom:auto;margin:0 auto;width:min(440px,100%);z-index:auto;}  /* relative (not static) so the abs .rev-lens ring stays anchored to the laptop, matching r2 */
@media (max-width:900px){
  .r3hero .r3hero__brainspace{display:flex;min-height:0;margin-top:1.6rem;}
}