/* ============================================================
   Nunzio Lella — v7 POLISH LAYER
   --------------------------------------------------------------
   Loaded LAST (after v6-deploy.css). Refines:
   1) Soft-premium rounded corners (br radius tokens)
   2) Always-highlighted "Let's get in touch" hero card
   3) Bentobox compose/decompose scrub animation styles
   4) Inner-page fluidity: page-hero ambient glow + entrance polish
   5) Subtle interior section transitions
   ============================================================ */

/* ============================================================
   1 · RADIUS TOKENS
   ============================================================ */
:root {
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
}

/* override v5 radius globals */
:root {
  --r: 14px;
  --r-lg: 22px;
}

/* ============================================================
   2 · APPLY RADIUS — surfaces & cards
   ============================================================ */
.nav-card,
.proof-card,
.value,
.post-card,
.panel,
.form-card,
.cs-panel,
.li-card,
.logo-strip,
.logo-item,
.about-portrait,
.hero-portrait,
.post-thumb,
.soon-list .sl,
.soon-visual,
.xp-earlier,
.f-connect .fc-li,
.li-linkedin,
.mobile-menu,
.lang-menu,
.intro-loader,
.form-status,
.policy-frame,
.policy-back {
  border-radius: var(--radius);
}

/* extra-soft outer containers */
.logo-strip,
.about-portrait,
.hero-portrait,
.intro-loader {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* small pills: chips, tags, badges, controls */
.btn,
.btn-primary,
.btn-ghost,
.btn-submit,
.btn-call,
.menu-toggle,
.lang-btn,
.burger,
.nc-tags span,
.tools-cloud span,
.tl-chips .chip,
.pr-tag,
.ph-index,
.soon-list .sl .sk,
.post-thumb .pt-cat,
.soon-badge {
  border-radius: var(--radius-pill);
}

/* nc-arrow + small icon squares: gentle squircle */
.nc-arrow,
.cs-line .cs-ic,
.f-soc,
.li-linkedin .lk-ic,
.f-connect .fc-li .lk-ic,
.logo .mono-mark,
.f-brand .f-mark {
  border-radius: 12px;
}

/* mobile menu / nav overlay panel */
.ov-panel,
.nav-overlay .ov-bg {
  /* keep panel sharp on right edge for brutalist anchor, but soften left edge */
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

/* form fields: bottom-line keeps brutalist, but containing wrapper softens */
.field input,
.field textarea,
.newsletter input[type=email] {
  border-radius: 0 0 8px 8px;
}

/* page curtain: stays sharp wipe — DO NOT round */

/* ============================================================
   3 · ALWAYS-HIGHLIGHT "Let's get in touch" card
   --------------------------------------------------------------
   Selector: 6th child of .home-nav, also .nav-card.wide:last-child
   Visual treatment: subtle gradient bg + persistent red accent border
   + soft glow pulse + always-visible arrow stroke
   ============================================================ */
.home-nav > .nav-card:last-child,
.home-nav > .nav-card.wide:last-child {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(255,42,0,.18), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(255,85,0,.10), transparent 60%),
    var(--surface);
  border-color: rgba(255,42,0,.45);
  box-shadow:
    0 0 0 1px rgba(255,42,0,.18) inset,
    8px 8px 0 rgba(255,42,0,.10),
    0 0 38px rgba(255,42,0,.12);
  position: relative;
  overflow: hidden;
}
.home-nav > .nav-card:last-child::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent));
  background-size: 200% 100%;
  transform: scaleX(1) !important;
  animation: ctaSheen 4s linear infinite;
  z-index: 3;
}
@keyframes ctaSheen {
  0% { background-position: 0% 0; }
  100% { background-position: 200% 0; }
}
.home-nav > .nav-card:last-child .nc-arrow {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
  animation: ctaPulse 2.4s var(--ease) infinite;
}
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,42,0,.55); }
  50%      { box-shadow: 0 0 0 10px rgba(255,42,0,0); }
}
.home-nav > .nav-card:last-child .nc-title {
  color: var(--text-hi);
}
.home-nav > .nav-card:last-child .nc-desc {
  color: var(--text);
}

/* hover even more intense */
.home-nav > .nav-card:last-child:hover {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px rgba(255,42,0,.32) inset,
    10px 10px 0 rgba(255,42,0,.22),
    0 0 60px rgba(255,42,0,.22);
}
.home-nav > .nav-card:last-child:hover .nc-arrow {
  transform: rotate(45deg) scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .home-nav > .nav-card:last-child::before,
  .home-nav > .nav-card:last-child .nc-arrow { animation: none; }
}

/* ============================================================
   4 · BENTOBOX COMPOSE/DECOMPOSE — initial scattered state
   --------------------------------------------------------------
   The cards begin scattered (translateY + tilted) and rejoin
   when the section enters viewport. Reverses when leaving up.
   GSAP timeline in effects.js drives the actual scrub.
   The CTA card (last-child) is EXCLUDED from disassembly.
   ============================================================ */
html.gsap-on #explore .nav-card:not(:last-child) {
  will-change: transform, opacity;
}
/* scattered start positions (only when JS hasn't taken over) */
html:not(.gsap-on) #explore .nav-card { opacity: 1; transform: none; }

/* per-card scatter offsets (set as custom props, animated in JS) */
#explore .nav-card:nth-child(1) { --scatter-x: -120px; --scatter-y:  60px; --scatter-r: -6deg; }
#explore .nav-card:nth-child(2) { --scatter-x:  140px; --scatter-y:  80px; --scatter-r:  7deg; }
#explore .nav-card:nth-child(3) { --scatter-x: -160px; --scatter-y: 120px; --scatter-r: -8deg; }
#explore .nav-card:nth-child(4) { --scatter-x:  160px; --scatter-y: 140px; --scatter-r:  5deg; }
#explore .nav-card:nth-child(5) { --scatter-x: -80px;  --scatter-y: 160px; --scatter-r: -4deg; }
#explore .nav-card:nth-child(6) { --scatter-x: 0;      --scatter-y: 0;     --scatter-r:  0; }

/* ============================================================
   5 · INNER PAGES — page-hero ambient glow + extra polish
   ============================================================ */
.page-hero {
  position: relative;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: clamp(420px, 60vw, 720px);
  height: clamp(420px, 60vw, 720px);
  background: radial-gradient(circle at 65% 35%,
    rgba(255,42,0,.16) 0%,
    rgba(255,85,0,.06) 30%,
    transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: heroGlowDrift 16s ease-in-out infinite;
}
@keyframes heroGlowDrift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-30px, 40px) scale(1.08); }
}
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero .ph-watermark { z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .page-hero::after { animation: none; }
}

/* a subtle accent strip at the top of every inner page-hero — coherent with the home loader vibe */
.page-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: .6;
  z-index: 3;
}

/* ============================================================
   6 · INTERIOR SECTION GENTLE ELEVATION
   ============================================================ */
.section + .section { position: relative; }
.section + .section::before {
  content: "";
  position: absolute;
  left: 50%; top: -1px;
  width: 60%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
  transform: translateX(-50%);
  opacity: .5;
}

/* ============================================================
   7 · CARD HOVER — smoother offset shadow with radius
   ============================================================ */
.nav-card:hover,
.proof-card:hover,
.value:hover,
.post-card:hover {
  box-shadow:
    8px 8px 0 rgba(255,42,0,.18),
    0 0 46px rgba(255,42,0,.12),
    0 4px 18px rgba(0,0,0,.4);
}

/* portraits get softer shadow */
.hero-portrait,
.about-portrait {
  box-shadow:
    16px 16px 0 rgba(255,42,0,.2),
    0 8px 30px rgba(0,0,0,.45);
}

/* ============================================================
   8 · MOBILE — keep all roundings sane on small screens
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --radius: 12px;
    --radius-lg: 16px;
  }
  .home-nav > .nav-card:last-child {
    /* still highlighted on mobile but less intense glow */
    box-shadow:
      0 0 0 1px rgba(255,42,0,.18) inset,
      4px 4px 0 rgba(255,42,0,.10);
  }
  .page-hero::after {
    inset: -10% -20% auto auto;
    width: 80vw;
    height: 80vw;
    filter: blur(28px);
  }

  /* Bentobox scatter offsets disabled on mobile AND landscape phones:
     cards are full-width / 1-col stacked, so the desktop scatter pattern
     would push them beyond the viewport edge (~+160px) and cause
     horizontal overflow. Covers portrait (≤768) + landscape (≤920). */
}

@media (max-width: 920px) {
  #explore .nav-card {
    --scatter-x: 0 !important;
    --scatter-y: 24px !important;
    --scatter-r: 0 !important;
  }
}

/* ============================================================
   9 · MOBILE OVERFLOW SAFETY — prevent horizontal swipe/bounce
   --------------------------------------------------------------
   Some decorative children (marquees, scatter cards, blob canvas)
   can momentarily exceed the viewport during animation. Clip at
   body level on mobile so the user never sees horizontal scroll.
   ============================================================ */
@media (max-width: 920px) {
  html, body {
    overflow-x: clip;
    overflow-x: hidden; /* fallback for browsers without `clip` */
    max-width: 100vw;
  }
}

/* ============================================================
   13 · ADMINBOARD LINK — inconspicuous footer entry point
   ============================================================ */
.footer-admin {
  display: flex;
  justify-content: flex-end;
  padding: 2px 0 0;
  margin-top: 4px;
  border-top: 1px dashed rgba(255,255,255,.04);
}
.footer-admin-link {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: #2a2826;
  opacity: .55;
  text-decoration: none;
  padding: 4px 0;
  transition: color .25s, opacity .25s;
}
.footer-admin-link:hover,
.footer-admin-link:focus-visible {
  color: var(--muted);
  opacity: 1;
}

/* ============================================================
   14 · WEBGL LOW-END FALLBACK
   --------------------------------------------------------------
   On low-end devices (CPU < 4 cores, RAM < 4 GB, Save-Data, slow net)
   the WebGL blob is skipped. A radial CSS gradient simulates the
   ambient warm glow so the hero still feels alive.
   Trigger: html.low-end class set in effects.js boot.
   ============================================================ */
html.low-end .bg-fluid,
html.low-end body::after { display: none !important; }

html.low-end .hero-canvas,
.hero-canvas-fallback {
  background:
    radial-gradient(55% 60% at 70% 45%,
      rgba(255,42,0,.40) 0%,
      rgba(120,18,0,.32) 25%,
      rgba(40,5,0,.18) 55%,
      transparent 80%),
    radial-gradient(40% 50% at 80% 60%,
      rgba(255,122,58,.18) 0%,
      transparent 60%);
  opacity: .9;
  animation: lowEndPulse 12s ease-in-out infinite;
}
@keyframes lowEndPulse {
  0%, 100% { transform: scale(1) translate(0,0); }
  50%      { transform: scale(1.04) translate(-8px, 6px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-canvas-fallback { animation: none; }
}

/* ============================================================
   15 · NEWSLETTER CAPTURE in FOOTER
   --------------------------------------------------------------
   Mini inline form for lead capture without leaving the page.
   Brevo-ready: posts to NEWSLETTER_ENDPOINT in site.js.
   Until configured, fallback opens mailto: with the email pre-filled.
   ============================================================ */
.footer-newsletter {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
}
.footer-newsletter h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.footer-newsletter .fn-pitch {
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
  max-width: 360px;
}
.footer-newsletter form {
  display: flex;
  gap: 10px;
  align-items: stretch;
  max-width: 460px;
}
.footer-newsletter input[type="email"] {
  flex: 1 1 auto;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-hi);
  font-family: var(--mono);
  font-size: 13px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  transition: border-color .25s, box-shadow .25s;
}
.footer-newsletter input[type="email"]::placeholder {
  color: var(--muted-2);
}
.footer-newsletter input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}
.footer-newsletter button {
  min-height: 44px;
  padding: 0 22px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .25s, color .25s, transform .25s var(--ease);
}
.footer-newsletter button:hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  transform: translate(-2px,-2px);
}
.footer-newsletter .fn-status {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--muted);
  min-height: 16px;
}
.footer-newsletter .fn-status.ok { color: #6ee48a; }
.footer-newsletter .fn-status.err { color: var(--accent); }

/* On mobile keep stacked */
@media (max-width: 600px) {
  .footer-newsletter form { flex-direction: column; }
  .footer-newsletter button { width: 100%; }
}

/* ============================================================
   16 · CV CONNECT-BACK BAR (cv.html)
   ============================================================ */
.cv-connect-bar {
  position: sticky; top: 0; left: 0; right: 0;
  background: #050505;
  color: #F4F1EB;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 22px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  z-index: 9999;
  border-bottom: 1px solid #FF2A00;
}
.cv-connect-bar a,
.cv-connect-bar button {
  color: #F4F1EB;
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  padding: 8px 14px;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  border-radius: 999px;
  transition: background .25s, color .25s, border-color .25s;
}
.cv-connect-bar a:hover,
.cv-connect-bar button:hover {
  background: #FF2A00; border-color: #FF2A00; color: #fff;
}
@media print { .cv-connect-bar { display: none !important; } }

/* a11y helper — visually hidden, screen reader available */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}