/* hero-3d.css — PART 2 of 2-part visual upgrade
   ThreeUI-inspired atmospheric WebGL hero for Summit homepage.
   The static navy gradient here is ALSO the fallback look for:
   prefers-reduced-motion, mobile, and WebGL-unavailable browsers. */

.tp-hero{
  position:relative;           /* stacking context for canvas/scrim/content */
  overflow:hidden;             /* clip the canvas to the hero */
  background:linear-gradient(165deg,#1A2B44 0%,#152A46 45%,#12233B 100%);
}

/* --- injected WebGL canvas (first child of .tp-hero) --- */
.tp-hero-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}

/* --- hero content above the canvas --- */
.tp-hero > .wrap{
  position:relative;
  z-index:1;
}

/* --- soft radial scrim behind the text zone (headline legibility first) --- */
.tp-hero-copy{
  position:relative;
  isolation:isolate;           /* keep the ::before inside this stacking context */
}
.tp-hero-copy::before{
  content:"";
  position:absolute;
  inset:-56px -80px;
  z-index:-1;
  background:radial-gradient(
    ellipse 62% 82% at 50% 42%,
    rgba(13,24,41,.66) 0%,
    rgba(13,24,41,.30) 52%,
    rgba(13,24,41,0) 78%
  );
  pointer-events:none;
}

/* --- legibility overrides: ink text becomes light on the navy scene --- */
body.home-topline .tp-hero-copy h1{color:#FFFFFF}
body.home-topline .tp-hero-copy .lede{color:rgba(255,255,255,.84)}
body.home-topline .tp-hero .tp-offer-line{color:rgba(255,255,255,.62)}
/* eyebrow + accent stay gold (#CBA135) — they already read on navy */

/* reduced-motion: the JS renders ONE static frame as the poster (never loops),
   so the canvas stays visible — the static gradient above is only the
   pre-JS / no-WebGL fallback. */

/* ============ HERO v12 — architectural type + product-as-cinema ============
   Reference-steals (hero-research/HERO-NOTES.md, all frames inspected):
   - Darkroom/TE/Vercel/Linear: type at ARCHITECTURAL scale is the hero —
     Clash Display 7.4vw, left-aligned, edge-to-edge. Bravery in scale,
     not decoration.
   - Vercel triptych: proof-lines ride right of the statement —
     "$175/mo / $0 setup / month-to-month" as the credibility column.
   - Framer: product-as-cinema — the panel becomes a glowing artifact with
     gold edge-light and a browser-chrome bar, instead of abstract decoration.
   - Stripe: one accent, ruthless discipline — gold on navy, nothing competing.
   Conversion grammar kept: eyebrow + statement + sub + CTA + proof in viewport 1.
*/
.tp-hero-v12{padding:calc(72px + 88px) 0 110px}

.tp-hero-v12 .tp-hero-main{position:relative;z-index:1;max-width:none;text-align:left}

/* legibility field behind the left-aligned copy (atmosphere stays calm here) */
.tp-hero-v12 .tp-hero-main::before{
  content:"";position:absolute;inset:-48px -72px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 72% 92% at 28% 38%,
    rgba(13,24,41,.74) 0%,rgba(13,24,41,.36) 55%,rgba(13,24,41,0) 82%);
}

.tp-hero-v12 .tp-eyebrow{margin:0 0 26px}

.tp-hero-v12 h1{
  margin:0 0 46px;max-width:15ch;
  font-size:clamp(54px,7.4vw,128px);
  line-height:.96;letter-spacing:-.015em;
  text-wrap:balance;
}

/* statement row: lede + CTA left, proof-lines right */
.tp-hero-v12 .tp-hero-sub{
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(36px,5vw,96px);align-items:end;
}
.tp-hero-v12 .lede{margin:0;max-width:46ch}
.tp-hero-v12 .actions{display:flex;justify-content:flex-start;margin:32px 0 0}

.tp-hero-proof{list-style:none;margin:0;padding:0 0 4px;display:grid;gap:0}
.tp-hero-proof li{
  display:flex;align-items:baseline;gap:14px;
  padding:16px 0;border-top:1px solid rgba(203,161,53,.30);
}
.tp-hero-proof li:last-child{border-bottom:1px solid rgba(203,161,53,.30)}
.tp-hero-proof strong{
  font-family:'Clash Display','General Sans',Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-weight:700;text-transform:uppercase;letter-spacing:-.01em;
  font-size:20px;color:#FFFFFF;white-space:nowrap;
}
.tp-hero-proof strong::after{
  content:"";display:inline-block;width:7px;height:7px;margin-left:12px;
  background:#CBA135;transform:rotate(45deg) translateY(-1px);
}
.tp-hero-proof span{color:rgba(255,255,255,.60);font-size:15px}

/* product-as-cinema: the panel as a glowing artifact */
.tp-hero-v12 .tp-panel-cinema{
  margin-top:88px;
  border:1px solid rgba(203,161,53,.40);
  box-shadow:0 0 90px rgba(203,161,53,.13),0 40px 90px -40px rgba(0,0,0,.62);
}
.tp-browserbar{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:8px;
  padding:15px 22px;border-bottom:1px solid rgba(255,255,255,.09);
}
.tp-browserbar i{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.20)}
.tp-browserbar i:first-child{background:#CBA135}
.tp-browserbar em{
  margin-left:14px;font-style:normal;
  font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
/* shots sit below the browser bar */
.tp-hero-v12 .tp-shot-a{top:168px}
.tp-hero-v12 .tp-shot-b{bottom:52px}

@media (max-width:900px){
  .tp-hero-v12{padding:calc(72px + 56px) 0 80px}
  .tp-hero-v12 h1{font-size:clamp(48px,12.5vw,84px);max-width:12ch}
  .tp-hero-v12 .tp-hero-sub{grid-template-columns:1fr;align-items:start;gap:36px}
  .tp-hero-v12 .tp-panel-cinema{margin-top:64px}
  .tp-hero-v12 .tp-shot-a{top:150px}
}

/* v12 legibility: headline + lede stay light on the navy scene
   (the old .tp-hero-copy overrides no longer apply after the v12 markup) */
.tp-hero-v12 .tp-hero-main h1{color:#FFFFFF}
.tp-hero-v12 .tp-hero-main .lede{color:rgba(255,255,255,.84)}

/* ============ HERO v13 — smooth cinematic navy ============
   Jordan: the navy background was "ruff" — the WebGL particle/noise texture
   read as grain. Replaced with a perfectly smooth static treatment: a deep
   navy gradient plus ONE soft gold aura sitting behind the product panel
   (Framer-style: the glow comes from the artifact, not from background noise).
   hero-3d.js now skips WebGL entirely on .tp-hero-v12 ("static-bg" reason),
   so this hero costs zero GPU and can never jank.
   Sites stay directly under the hero — that is the Framer/Stripe grammar, and
   for a website company the product visual IS the proof. v13 just gives the
   panel more breathing room so it reads as its own cinematic moment. */
.tp-hero-v12{
  background:
    radial-gradient(ellipse 58% 40% at 50% 84%, rgba(203,161,53,.11) 0%, rgba(203,161,53,0) 70%),
    linear-gradient(180deg,#0A1322 0%,#0F1E35 48%,#0B1526 100%);
}
/* soften the copy scrim — the new gradient is already dark and clean */
.tp-hero-v12 .tp-hero-main::before{
  background:radial-gradient(ellipse 72% 92% at 28% 38%,
    rgba(10,19,34,.55) 0%,rgba(10,19,34,.22) 55%,rgba(10,19,34,0) 82%);
}
/* the panel gets its own moment: more separation from the statement row */
.tp-hero-v12 .tp-panel-cinema{margin-top:120px}
@media (max-width:900px){
  .tp-hero-v12 .tp-panel-cinema{margin-top:88px}
}

/* ============ HERO v14 — expensive materials ============
   Jordan: "that site dont look expensive." The layout was right; the MATERIALS
   were cheap — flat mustard gold, pasted-on white screenshot cards, fussy
   hairline diamonds, a hard white nav stripe. This pass is all material:
   1. Nav dissolves into the hero: transparent at top, blurred navy on scroll
      (rides the existing .scrolled toggle in main.js).
   2. Metallic gold: gradient text for BOOKS JOBS, gradient + inner-highlight
      buttons. Gold should read as metal, not mustard.
   3. Real depth: inset top highlights, layered shadows, glass browser chrome.
   4. Restraint: diamond markers gone, hairlines quieted.
   5. Screenshots bleed like real screens instead of pasted white cards. */

/* --- 1. nav dissolves into the hero --- */
body.home-topline .nav{
  background:linear-gradient(180deg,rgba(10,19,34,.66) 0%,rgba(10,19,34,0) 100%);
  border-bottom:1px solid rgba(255,255,255,.07);
}
body.home-topline .nav.scrolled{
  background:rgba(10,19,34,.80);
  -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.09);
}
body.home-topline .nav .logo,
body.home-topline .nav .logo b{color:#FFFFFF}
body.home-topline .nav-links a,
body.home-topline .nav-group>button{color:rgba(255,255,255,.84)}
body.home-topline .nav-links a:hover,
body.home-topline .nav-group>button:hover{color:#CBA135}
body.home-topline .nav-menu-toggle span{background:#FFFFFF}

/* --- 2. metallic gold --- */
.tp-hero-v12 .tp-accent{
  background:linear-gradient(180deg,#E9C767 0%,#C69A35 45%,#8A6A1F 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tp-hero-v12 .btn-solid,
body.home-topline .nav .btn-solid{
  background:linear-gradient(180deg,#EAC96C 0%,#D4A93C 48%,#A37F29 100%);
  border:1px solid rgba(110,80,18,.60);
  color:#16233A;
  border-radius:14px;
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50),
             inset 0 -2px 6px rgba(110,80,18,.35),
             0 16px 34px -14px rgba(203,161,53,.65);
}
.tp-hero-v12 .btn-solid:hover,
body.home-topline .nav .btn-solid:hover{filter:brightness(1.07)}

/* --- 3+5. panel depth, screenshots as real screens --- */
.tp-hero-v12 .tp-panel-cinema{
  background:linear-gradient(165deg,#182C4E 0%,#111F36 55%,#0C1628 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),
             0 0 110px rgba(203,161,53,.13),
             0 60px 120px -40px rgba(0,0,0,.75);
}
.tp-hero-v12 .tp-browserbar{
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.tp-hero-v12 .tp-browserbar i{background:rgba(255,255,255,.14)}
.tp-hero-v12 .tp-panel-shot{
  background:transparent;padding:0;border-radius:14px;
  box-shadow:0 50px 100px -24px rgba(0,0,0,.70);
}
.tp-hero-v12 .tp-panel-shot img{
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
}

/* --- 4. restraint: diamonds gone, hairlines quieted --- */
.tp-hero-v12 .tp-hero-proof strong::after{display:none}
.tp-hero-v12 .tp-hero-proof li{border-top-color:rgba(203,161,53,.16)}
.tp-hero-v12 .tp-hero-proof li:last-child{border-bottom-color:rgba(203,161,53,.16)}

/* ============ HERO v17 — full-bleed photographic background (light streaks) ============
   Jordan 2026-09-17: "go full bleed in the hero" -> clarified as a full-bleed IMAGE
   for the hero section BACKGROUND (not the showcase). Reference: Resend's dark
   cinematic light-streak backdrop (hero-research/resend-hero.png, inspected).
   The photo is near-black; brand navy is a GRADE over it (never the photo's own
   color), so the field reads deep navy-black, never muddy. Gold streaks echo the
   gold headline accent. WebGL canvas is retired on this hero — it fought the photo.
   v15/v16 full-bleed-showcase experiments were reverted per Jordan's correction. */
.tp-hero{
  background:
    linear-gradient(180deg, rgba(26,43,68,.84) 0%, rgba(26,43,68,.52) 42%, rgba(18,35,59,.90) 100%),
    url("../portfolio-assets/hero-bg-streaks.webp") center 32%/cover no-repeat,
    #1A2B44;
}
.tp-hero-canvas{display:none!important}

/* ============ HERO v17.1 — live drifting light streaks (Jordan 2026-09-17) ============
   The photo's streaks are baked in; this layer adds slow, live drift so the light
   feels alive. GPU-cheap: transform only. Respects reduced-motion. */
.tp-hero{position:relative;overflow:hidden}
.tp-hero-streaks{position:absolute;inset:-15%;z-index:0;pointer-events:none;overflow:hidden}
.tp-hero-streaks i{
  position:absolute;top:-25%;bottom:-25%;display:block;
  background:linear-gradient(180deg,
    rgba(255,236,190,0) 0%,
    rgba(255,236,190,.28) 28%,
    rgba(233,196,106,.5) 50%,
    rgba(255,236,190,.28) 72%,
    rgba(255,236,190,0) 100%);
  filter:blur(14px);
  will-change:transform;
  animation-name:streak-drift;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
}
.tp-hero-streaks .s1{left:12%;width:110px;opacity:.55;animation-duration:26s}
.tp-hero-streaks .s2{left:46%;width:64px;opacity:.38;animation-duration:34s;animation-delay:-11s}
.tp-hero-streaks .s3{left:74%;width:150px;opacity:.30;animation-duration:42s;animation-delay:-23s}
@keyframes streak-drift{
  from{transform:rotate(22deg) translateX(-30vw)}
  to{transform:rotate(22deg) translateX(30vw)}
}
.tp-hero > .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){
  .tp-hero-streaks i{animation:none}
}