/* =====================================================================
   My Local Everything — Gulf Nightfall design system
   One edit in :root re-themes the whole site.
   ===================================================================== */

:root{
  /* ---- theme-independent: type, shape, motion ---- */
  --grad-brand: linear-gradient(100deg, var(--teal) 0%, var(--gold) 100%);
  --f-display: "Sora", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --r:    14px;
  --r-lg: 24px;
  --r-pill: 999px;
  --ease: cubic-bezier(.16,1,.3,1);
  --container: 1180px;
  --gut: clamp(20px, 5vw, 48px);
  --btn-ink: #04222a;   /* dark ink that reads on the bright teal→gold button */
  --hero-text-haze: transparent;   /* overridden per theme */
}

/* ============================================================
   ☀ DAY — "Naples Daylight" (default): warm, beachy, coastal
   ============================================================ */
:root,
[data-theme="day"]{
  --base:        #F7F1E4;   /* warm sand */
  --base-2:      #FFFFFF;   /* raised panel */
  --base-3:      #FFFDF7;   /* card */
  --line:        rgba(15, 74, 92, .14);
  --line-strong: rgba(15, 74, 92, .26);

  --teal:   #0E97AD;        /* gulf water */
  --teal-hi:#0A6E80;        /* deep teal — legible on cream */
  --gold:   #DC9433;        /* sun gold */
  --coral:  #F0654C;        /* coral */

  --ink:    #0B2533;        /* deep navy text */
  --foam:   #46606E;        /* muted slate */
  --foam-2: #7C909D;        /* faint */

  --grad-text: linear-gradient(100deg, #0A6E80 0%, #B97216 75%);
  --glow-teal: 0 18px 50px -22px rgba(14,151,173,.45);
  --glow-gold: 0 18px 50px -24px rgba(220,148,51,.4);
  --shadow:    0 26px 60px -30px rgba(11,53,74,.28);

  --header-bg: rgba(247,241,228,.82);
  --drawer-bg: rgba(247,241,228,.97);
  --veil:      linear-gradient(100deg, rgba(247,241,228,.93) 0%, rgba(247,241,228,.62) 34%, rgba(247,241,228,.16) 62%, transparent 100%),
               linear-gradient(0deg, rgba(247,241,228,.5) 0%, transparent 30%);
  --glass:     rgba(255,255,255,.55);
  --cursor-blend: multiply;
  --grain-opacity: .22;
  --bloom:
    radial-gradient(70% 50% at 80% -5%, rgba(14,151,173,.16), transparent 60%),
    radial-gradient(60% 45% at 8% 6%, rgba(220,148,51,.14), transparent 55%),
    radial-gradient(55% 45% at 50% 108%, rgba(240,101,76,.08), transparent 60%);
  --media-veil: rgba(11,37,51,.18);
  --globe-glow: rgba(14,151,173,.20);
  --spot: rgba(14,151,173,.16);
}

/* ============================================================
   🌙 NIGHT — "Underground": deep, neon-cyan, technical
   ============================================================ */
[data-theme="night"]{
  --base:        #05080F;   /* near-black */
  --base-2:      #0A0F1A;   /* raised panel */
  --base-3:      #0E1626;   /* card */
  --line:        rgba(120, 205, 225, .12);
  --line-strong: rgba(120, 205, 225, .24);

  --teal:   #27CEE0;        /* neon cyan */
  --teal-hi:#7DF6FF;
  --gold:   #F4B860;        /* sunset gold accent */
  --coral:  #FF6B5C;

  --ink:    #E7F1F6;
  --foam:   #9DB2C1;
  --foam-2: #5C7184;

  --grad-text: linear-gradient(100deg, #7DF6FF 0%, #F4B860 70%);
  --glow-teal: 0 0 60px -10px rgba(39,206,224,.55);
  --glow-gold: 0 0 60px -12px rgba(244,184,96,.45);
  --shadow:    0 24px 60px -24px rgba(0,0,0,.7);

  --header-bg: rgba(5,8,15,.72);
  --drawer-bg: rgba(5,8,15,.96);
  --veil:      linear-gradient(100deg, rgba(4,6,12,.97) 0%, rgba(4,6,12,.86) 28%, rgba(4,6,12,.46) 54%, rgba(4,6,12,.08) 84%, transparent 100%),
               linear-gradient(0deg, rgba(4,6,12,.82) 0%, rgba(4,6,12,.22) 40%, transparent 60%);
  --glass:     rgba(5,8,15,.4);
  --cursor-blend: screen;
  --grain-opacity: .5;
  --bloom:
    radial-gradient(70% 50% at 75% -5%, rgba(39,206,224,.16), transparent 60%),
    radial-gradient(60% 45% at 10% 8%, rgba(244,184,96,.10), transparent 55%);
  --media-veil: rgba(5,8,15,.6);
  --hero-text-haze: rgba(4,6,12,.62);
  --globe-glow: rgba(39,206,224,.26);
  --spot: rgba(39,206,224,.20);
}

/* persona content swap: Day = LOCAL audience, Night = GLOBAL audience */
[data-theme="day"] [data-aud="global"]{ display:none !important; }
[data-theme="night"] [data-aud="local"]{ display:none !important; }

/* night-only blueprint grid behind everything (underground-tech feel) */
[data-theme="night"]::before{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background-image:
    linear-gradient(rgba(120,205,225,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,205,225,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 78%);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000 25%, transparent 78%);
}

/* smooth cross-fade when switching themes */
body, .site-header, .card, .svc, .work, .stat, .cta__panel, .cursor-dot, .cursor-ring{
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), box-shadow .45s var(--ease);
}

/* ---------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis{ scroll-behavior:auto !important; }   /* Lenis owns scrolling */
body{
  font-family:var(--f-body);
  background:var(--base);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
ul{ list-style:none; }
::selection{ background:var(--teal); color:var(--base); }

/* atmosphere: faint gulf-light bloom behind everything */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background: var(--bloom);
}
/* film grain */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:var(--grain-opacity);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- layout */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:clamp(72px, 11vw, 140px); position:relative; }
.section--tight{ padding-block:clamp(48px, 7vw, 88px); }

/* ---------------------------------------------------------------- type */
h1,h2,h3,h4{ font-family:var(--f-display); font-weight:700; line-height:1.04; letter-spacing:-.02em; }
.h-xl{ font-size:clamp(2.7rem, 7vw, 5.4rem); }
.h-lg{ font-size:clamp(2.1rem, 4.6vw, 3.4rem); }
.h-md{ font-size:clamp(1.5rem, 3vw, 2.1rem); }
.lede{ font-size:clamp(1.05rem, 1.7vw, 1.3rem); color:var(--foam); max-width:62ch; }
.eyebrow{
  font-family:var(--f-display); font-weight:600; font-size:.78rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--teal-hi); display:inline-flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--grad-brand); }
.gradient-text{ background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* ---------------------------------------------------------------- buttons */
.btn{
  --pad: .95rem 1.6rem;
  display:inline-flex; align-items:center; gap:.6rem; padding:var(--pad);
  font-family:var(--f-display); font-weight:600; font-size:.95rem; letter-spacing:.01em;
  border-radius:var(--r-pill); position:relative; overflow:hidden;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
  will-change:transform;
}
.btn svg{ width:1.05em; height:1.05em; transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn--primary{ background:var(--grad-brand); color:var(--btn-ink); box-shadow:var(--glow-teal); }
.btn--primary::after{   /* sheen */
  content:""; position:absolute; inset:0; transform:translateX(-130%);
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transition:transform .8s var(--ease);
}
.btn--primary:hover{ transform:translateY(-3px); box-shadow:0 0 80px -8px rgba(31,182,201,.7); }
.btn--primary:hover::after{ transform:translateX(130%); }
.btn--ghost{ border:1px solid var(--line-strong); color:var(--ink); background:rgba(255,255,255,.02); }
.btn--ghost:hover{ border-color:var(--teal); transform:translateY(-3px); box-shadow:var(--glow-teal); }
.btn--lg{ --pad:1.1rem 2rem; font-size:1.02rem; }

/* ---------------------------------------------------------------- header */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:900;
  transition:background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:var(--header-bg); backdrop-filter:blur(16px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:74px; }
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--f-display); font-weight:700; font-size:1.05rem; letter-spacing:-.01em; }
.brand .mark{
  width:34px; height:34px; border-radius:10px; display:grid; place-items:center;
  background:var(--grad-brand); color:var(--btn-ink); font-weight:800; font-size:.95rem;
  box-shadow:var(--glow-teal);
}
.brand .mark span{ transform:translateY(-.5px); }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{ font-size:.92rem; color:var(--foam); transition:color .25s; position:relative; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--grad-brand); transition:width .3s var(--ease); }
.nav-links a:hover{ color:var(--ink); } .nav-links a:hover::after{ width:100%; }
.nav-links a.active{ color:var(--ink); } .nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:1rem; }
.nav-controls{ display:flex; align-items:center; gap:.5rem; position:relative; padding-right:1rem; }
.nav-controls::after{ content:""; position:absolute; right:0; top:50%; transform:translateY(-50%); width:1px; height:20px; background:var(--line-strong); }
.drawer-controls{ display:flex; align-items:center; gap:.8rem; margin-top:1rem; }

/* theme toggle (sun / moon) */
.theme-toggle{ position:relative; width:68px; height:34px; flex:0 0 auto; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:var(--glass); backdrop-filter:blur(8px);
  display:flex; align-items:center; padding:3px; }
.theme-toggle .knob{ position:absolute; top:3px; left:3px; width:28px; height:28px; border-radius:50%;
  background:var(--grad-brand); box-shadow:var(--glow-teal); transition:transform .45s var(--ease); }
[data-theme="night"] .theme-toggle .knob{ transform:translateX(34px); }
.theme-toggle .ti{ flex:1; display:grid; place-items:center; position:relative; z-index:1; color:var(--foam); transition:color .3s; }
.theme-toggle .ti svg{ width:16px; height:16px; }
[data-theme="day"] .theme-toggle .ti.sun{ color:var(--btn-ink); }
[data-theme="night"] .theme-toggle .ti.moon{ color:var(--btn-ink); }
.drawer-controls .theme-toggle{ align-self:center; margin-top:0; }

/* small icon button (accessibility / motion toggle) */
.icon-btn{ width:40px; height:40px; flex:0 0 auto; border-radius:50%; border:1px solid var(--line-strong);
  display:grid; place-items:center; color:var(--foam); background:var(--glass); backdrop-filter:blur(8px);
  transition:color .3s, border-color .3s, background .3s; }
.icon-btn svg{ width:18px; height:18px; }
.icon-btn:hover{ color:var(--ink); border-color:var(--teal); }
.icon-btn[aria-pressed="true"]{ color:var(--btn-ink); background:var(--grad-brand); border-color:transparent; }

/* mobile drawer */
.nav-toggle{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--line-strong); flex-direction:column; gap:5px; align-items:center; justify-content:center; }
.nav-toggle span{ width:20px; height:2px; background:var(--ink); transition:.3s var(--ease); }
.nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2){ opacity:0; }
.nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.drawer{
  position:fixed; inset:0; z-index:899; background:var(--drawer-bg); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; justify-content:center; gap:1.4rem; padding:var(--gut);
  transform:translateY(-100%); transition:transform .5s var(--ease); pointer-events:none;
}
.drawer.open{ transform:none; pointer-events:auto; }
.drawer a{ font-family:var(--f-display); font-size:1.7rem; font-weight:600; color:var(--ink); }
.drawer a span{ color:var(--teal); font-size:1rem; margin-right:.6rem; }

@media (max-width:860px){
  .nav-links{ display:none; }
  .nav-controls{ display:none; }
  .nav-toggle{ display:flex; }
}

/* ---------------------------------------------------------------- cards */
.card{
  position:relative; background:linear-gradient(180deg, var(--base-3), var(--base-2));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(1.4rem,2.6vw,2rem);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s;
}
.card::before{   /* top hairline highlight */
  content:""; position:absolute; inset:0 0 auto 0; height:1px; border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--line-strong),transparent);
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--shadow); }

/* ---------------------------------------------------------------- footer */
.site-footer{ border-top:1px solid var(--line); padding-block:clamp(48px,7vw,80px) 2rem; position:relative; }
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:2.5rem; }
.site-footer a{ color:var(--foam); transition:color .25s; }
.site-footer a:hover{ color:var(--teal-hi); }
.foot-col h4{ font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--foam-2); margin-bottom:1rem; }
.foot-col li{ margin-bottom:.6rem; font-size:.95rem; }
.foot-bottom{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--foam-2); font-size:.85rem; }
.foot-watermark{ font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; line-height:.85;
  font-size:clamp(3rem,13vw,11rem); color:transparent; -webkit-text-stroke:1px var(--line-strong);
  text-align:center; margin-top:2rem; user-select:none; }
@media (max-width:760px){ .foot-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .foot-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------- custom cursor */
.cursor-dot,.cursor-ring{ position:fixed; top:0; left:0; z-index:9999; pointer-events:none; border-radius:50%; mix-blend-mode:var(--cursor-blend); }
.cursor-dot{ width:7px; height:7px; background:var(--teal-hi); transform:translate(-50%,-50%); }
.cursor-ring{ width:34px; height:34px; border:1.5px solid rgba(244,184,96,.7); transform:translate(-50%,-50%); transition:width .3s, height .3s, background .3s, border-color .3s; }
.cursor-ring.bloom{ width:56px; height:56px; background:rgba(31,182,201,.10); border-color:var(--teal); }
@media (hover:none),(pointer:coarse){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------------------------------------------------------------- reveal */
[data-reveal]{ opacity:0; transform:translateY(26px); }
html.no-js [data-reveal]{ opacity:1; transform:none; }

/* ---------------------------------------------------------------- a11y / motion */
:focus-visible{ outline:2px solid var(--teal-hi); outline-offset:3px; border-radius:4px; }
.skip{ position:absolute; left:-9999px; top:0; background:var(--teal); color:var(--base); padding:.7rem 1rem; border-radius:0 0 8px 0; z-index:10000; }
.skip:focus{ left:0; }
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .cursor-dot,.cursor-ring{ display:none; }
}
/* runtime accessibility: motion toggle (html.reduce-motion) — kills animation + boosts contrast */
html.reduce-motion *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
html.reduce-motion [data-reveal]{ opacity:1 !important; transform:none !important; }
html.reduce-motion .reveal-mask > span{ transform:none !important; }
html.reduce-motion .cursor-dot, html.reduce-motion .cursor-ring{ display:none; }
[data-theme="day"].reduce-motion{ --foam:#33495a; --foam-2:#5a6f80; }
[data-theme="night"].reduce-motion{ --foam:#c4d5e1; --foam-2:#8ba1b1; }