/* ============================================================
   THE FORGE: homepage depth + motion layer
   Sits on top of styles.css (shared with the sub-pages). Same dark,
   gold, Anton/Inter identity; adds 3D, grain, and motion.
   ============================================================ */

/* Motion values measured from live reference sites with extract-site:
   the spring is the one Framer templates ship (onefin, as CSS linear()),
   the fallback curve is Resend's. Entrances: 10px blur, 14 to 20px rise. */
:root {
  --ease: cubic-bezier(.25, .1, .35, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease: linear(0, .024 2.56%, .0823 5.13%, .1594 7.69%, .2448 10.26%, .3315 12.82%, .4152 15.38%, .4934 17.95%, .5646 20.51%, .6282 23.08%, .6844 25.64%, .7334 28.21%, .7758 30.77%, .8122 33.33%, .8432 35.9%, .8694 38.46%, .8916 41.03%, .9102 43.59%, .9258 46.15%, .9388 48.72%, .9496 51.28%, .9586 53.85%, .966 56.41%, .9722 58.97%, .9772 61.54%, .9814 64.1%, .9848 66.67%, .9876 69.23%, .9899 71.79%, .9918 74.36%, .9933 76.92%, .9946 79.49%, .9956 82.05%, .9964 84.62%, .9971 87.18%, .9977 89.74%, .9981 92.31%, .9985 94.87%, .9988 97.44%, 1);
  }
}

/* ── Film grain over everything (very low, gives the black a texture) ── */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Headline word reveal ── */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em 0 .08em; margin: -.06em 0 -.08em; }
.split .wi { display: inline-block; transform: translateY(108%) rotate(4deg); transform-origin: 0 100%; transition: transform 1s var(--ease); }
.split.in .wi { transform: none; }

/* Gold words get a slow metallic sweep */
.gold .wi, .gold.sheen {
  background: linear-gradient(100deg, #F59E0B 0%, #FACC15 30%, #FFF3B0 45%, #FACC15 60%, #D97706 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: sheen 6s var(--ease-io) infinite;
}
@keyframes sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* Entrances move with `translate`, so `transform` stays free for 3D tilt.
   .reveal comes from styles.css; .fx-in adds a blur. */
.reveal { transform: none; translate: 0 20px; transition: opacity .9s var(--ease), translate .9s var(--ease), transform .5s var(--ease); }
.reveal.in { translate: none; }
.js .fx-in { opacity: 0; filter: blur(10px); translate: 0 14px; transition: opacity .9s var(--ease), filter .9s var(--ease), translate .9s var(--ease), transform .5s var(--ease); }
.js .fx-in.in { opacity: 1; filter: none; translate: none; }
.js .hero-sub.fx-in { transition-delay: .35s; }
.js .hero-btns.fx-in { transition-delay: .5s; }
.js .stores.fx-in { transition-delay: .62s; }

/* ── Nav: glass, hairline gold on scroll focus ── */
.nav { background: rgba(10,10,10,.55); backdrop-filter: blur(18px) saturate(140%); }

/* ── Hero ── */
.hero { padding: 72px 0 40px; min-height: min(860px, 100svh); display: flex; align-items: center; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 72% 45%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 60% at 72% 45%, #000 10%, transparent 70%);
}
.hero-wm { color: transparent; -webkit-text-stroke: 1px rgba(250,204,21,.08); font-size: 300px; top: 6%; right: -4%; }
.hero-grid { grid-template-columns: 1.1fr 1fr; width: 100%; }
.hero h1 { font-size: clamp(44px, 6.2vw, 92px); letter-spacing: -1.5px; line-height: .92; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  padding: 7px 14px 7px 10px; border-radius: 999px; border: 1px solid rgba(250,204,21,.28);
  background: rgba(250,204,21,.06); color: var(--gold); font-size: 11.5px; font-weight: 800; letter-spacing: 3px;
}
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(250,204,21,.6); animation: ping 2.2s var(--ease) infinite; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(250,204,21,.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(250,204,21,0); } }

/* The 3D stage */
.forge3d { position: relative; width: 100%; max-width: 560px; aspect-ratio: 4 / 5; margin: 0 auto; }
.forge3d::before {
  content: ''; position: absolute; left: 10%; right: 10%; bottom: 4%; height: 38%; z-index: 0;
  background: radial-gradient(ellipse at 50% 80%, rgba(245,158,11,.32), rgba(245,158,11,0) 70%); filter: blur(10px);
}
.forge3d canvas {
  -webkit-mask-image: radial-gradient(56% 56% at 50% 50%, #000 58%, transparent 100%);
          mask-image: radial-gradient(56% 56% at 50% 50%, #000 58%, transparent 100%);
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transform: scale(.94); transition: opacity 1.4s var(--ease), transform 1.6s var(--ease); }
.forge3d.is-live canvas { opacity: 1; transform: none; }
/* Fallback: the real home screen, shown only if the 3D never comes up */
.forge3d .device { position: absolute; left: 50%; top: 50%; width: 62%; translate: -50% -50%; opacity: 0; animation: fallback .6s var(--ease) 2.6s forwards; }
.forge3d.is-live .device { display: none; }
@keyframes fallback { to { opacity: 1; } }
.forge3d-tag {
  position: absolute; z-index: 2; left: 4%; bottom: 9%; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2);
  background: rgba(14,14,14,.6); backdrop-filter: blur(12px); font-size: 12px; color: #d4d4d4;
  opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease) 1.9s, transform .8s var(--ease) 1.9s;
}
.forge3d-tag b { font-family: 'Anton', sans-serif; font-size: 22px; font-weight: 400; color: var(--gold); line-height: 1; }
.forge3d.is-live .forge3d-tag { opacity: 1; transform: none; }
.forge3d-tag.tag-2 { left: auto; right: 2%; bottom: auto; top: 14%; transition-delay: 2.2s; }
.forge3d-tag .ti { font-size: 22px; color: var(--red); }

/* Snappy UI curve for small interactions (measured on the habitline template) */
.btn, .bt-opt, .store { transition-timing-function: cubic-bezier(.87, 0, .13, 1); transition-duration: .35s; }

/* ── Crossing marquee bands ── */
.bands { position: relative; height: 150px; overflow: hidden; margin: 10px 0; }
.band { position: absolute; left: -5%; width: 110%; padding: 15px 0; white-space: nowrap; overflow: hidden; }
.band-a { top: 26px; background: var(--gold); transform: rotate(-2.2deg); z-index: 2; box-shadow: 0 14px 40px rgba(245,158,11,.25); }
.band-b { top: 58px; background: #050505; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: rotate(2deg); z-index: 1; }
.band .marquee-track span { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 22px; letter-spacing: 3px; }
.band-a .marquee-track span { color: #0A0A0A; }
.band-a .marquee-track b { color: #0A0A0A; margin: 0 22px; }
.band-b .marquee-track span { color: rgba(255,255,255,.55); }
.band-b .marquee-track b { color: var(--gold); margin: 0 22px; }
.marquee-track.rev { animation-direction: reverse; animation-duration: 34s; }

/* ── Inside the app: three real screens fanned out ──
   2D transforms on purpose: Safari draws translateZ/rotateY phones inside a
   scaled perspective stage as thin slivers (seen on a real iPhone). */
.fan-sec { padding: 96px 0 40px; overflow: hidden; }
.fan { position: relative; height: 640px; margin-top: 10px; --k: 1; }
.fan-stage { position: relative; height: 640px; display: flex; justify-content: center; transform-origin: 50% 0; }
.fan .device { position: absolute; top: 10px; width: 272px; max-width: none; transition: none; }
.fan .device:hover { transform: none; }
.fan .f-c { z-index: 3; transform: translateY(calc((1 - var(--k)) * 70px)) scale(calc(.94 + var(--k) * .06)); }
.fan .f-l { z-index: 2; --glow: rgba(0,0,0,.7); transform-origin: 50% 100%; transform: translateX(calc(-30px - var(--k) * var(--spread, 150px))) translateY(36px) rotate(calc(-2deg - var(--k) * 6deg)) scale(.86); filter: brightness(.8); }
.fan .f-r { z-index: 2; --glow: rgba(0,0,0,.7); transform-origin: 50% 100%; transform: translateX(calc(30px + var(--k) * var(--spread, 150px))) translateY(36px) rotate(calc(2deg + var(--k) * 6deg)) scale(.86); filter: brightness(.8); }
.fan .f-c.device { --halo: rgba(245,158,11,.22); }
.fan .notch { display: none; }   /* these screenshots have their titles where the island would sit */
.fan-cap { display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; color: var(--faint); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.fan-cap span::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--gold); margin-right: 9px; vertical-align: middle; transform: rotate(45deg); }

/* ── The System: bento of tilt + spotlight cards ── */
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(196px, auto); gap: 16px; }
.card {
  --c: var(--gold); position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #161616, #0e0e0e); border: 1px solid var(--line); border-radius: 18px; padding: 24px;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--ease), border-color .3s, opacity .9s var(--ease), filter .9s var(--ease), translate .9s var(--ease);
}
.card::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--c) 20%, transparent), transparent 45%);
}
.card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; opacity: 0; transition: opacity .35s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), var(--c), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.card:hover::before, .card:hover::after { opacity: 1; }
.card .ti { font-size: 26px; color: var(--c); display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: color-mix(in srgb, var(--c) 12%, transparent); margin-bottom: 18px; }
.card h3 { font-size: 15px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 8px; }
.card p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.card-big { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; }
.card-big h3 { font-family: 'Anton', sans-serif; font-weight: 400; font-size: clamp(30px, 3.4vw, 44px); letter-spacing: .5px; line-height: .95; }
.card-big p { font-size: 15.5px; max-width: 380px; }
.card-wide { grid-column: span 2; }

.streak { margin-top: 26px; }
.streak-top { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.streak-num { font-family: 'Anton', sans-serif; font-size: 84px; line-height: .85; color: #fff; }
.streak-num small { display: block; font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 3px; color: var(--faint); font-weight: 800; margin-bottom: 8px; }
.streak-label { font-size: 12px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); }
.streak-cells { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; }
.streak-cells span { height: 34px; border-radius: 5px; background: #1d1d1d; border: 1px solid #262626; transition: background .3s var(--ease), box-shadow .3s, transform .3s var(--ease); }
.streak-cells span.on { background: linear-gradient(180deg, #FFE27A, #F59E0B); border-color: #FACC15; box-shadow: 0 0 18px rgba(250,204,21,.35); transform: translateY(-3px); }
.streak-cells span.miss { background: var(--red); border-color: var(--red); box-shadow: 0 0 22px rgba(226,75,74,.6); }
.streak-cells.shake { animation: shake .45s var(--ease-io); }
@keyframes shake { 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }

/* ── Showcases: devices turn into place as you scroll ── */
.showcase-img { perspective: 1300px; --k: 1; }
.showcase .device {
  transform-style: preserve-3d;
  transform: rotateY(calc((1 - var(--k)) * -26deg + var(--ry, 0deg))) rotateX(calc((1 - var(--k)) * 10deg + var(--rx, 0deg))) translateY(calc((1 - var(--k)) * 40px));
  transition: transform .2s linear;
}
.showcase.rev .device { transform: rotateY(calc((1 - var(--k)) * 26deg + var(--ry, 0deg))) rotateX(calc((1 - var(--k)) * 10deg + var(--rx, 0deg))) translateY(calc((1 - var(--k)) * 40px)); }
.showcase .device:hover { transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)); }
.chip {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2);
  background: rgba(16,16,16,.72); backdrop-filter: blur(12px); font-size: 12px; font-weight: 700; letter-spacing: .4px;
  transform: translateZ(70px); box-shadow: 0 18px 40px rgba(0,0,0,.5);
}
.chip .ti { font-size: 16px; }
.chip-a { top: 16%; left: -22%; }
.chip-b { bottom: 14%; right: -20%; }

/* ── Wall of Shame: confessions burn in ── */
.shame, .shame.reveal.in { position: relative; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.shame-reason { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease) .35s; }
.shame.in .shame-reason { clip-path: inset(0 0 0 0); }
.flag-broken { box-shadow: 0 0 0 0 rgba(226,75,74,.5); animation: ember-flag 2.4s var(--ease) infinite; }
@keyframes ember-flag { 0% { box-shadow: 0 0 0 0 rgba(226,75,74,.55); } 80%, 100% { box-shadow: 0 0 0 8px rgba(226,75,74,0); } }
.example-tag { position: absolute; top: -9px; right: 16px; font-size: 9.5px; font-weight: 800; letter-spacing: 2px; color: var(--faint); background: var(--bg); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 8px; }

/* ── Pricing: a live gold edge on the featured tier ── */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.tier, .tier.reveal.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tier.feat {
  border: 2px solid transparent;
  background: linear-gradient(#15120a, #100e08) padding-box,
              conic-gradient(from var(--ang), #FACC15, #6b4e00 22%, #FFF0A8 38%, #FACC15 50%, #3a2a00 72%, #FACC15) border-box;
  animation: edge 7s linear infinite; box-shadow: 0 30px 80px rgba(245,158,11,.12);
}
@keyframes edge { to { --ang: 360deg; } }

/* Live Founding 20 applicant count, under the tier's button */
.fd-count { margin-top: 12px; min-height: 0; text-align: center; color: #b8b8b8; display: flex; align-items: center; justify-content: center; gap: 8px; }
.fd-count:empty { display: none; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; box-shadow: 0 0 0 0 rgba(34,197,94,.5); animation: ping-g 2.2s var(--ease) infinite; flex-shrink: 0; }
@keyframes ping-g { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.5); } 80%, 100% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } }

/* ── Waitlist ── */
.wl-input { border-radius: 10px; transition: border-color .2s, box-shadow .2s; }
.wl-input:focus { box-shadow: 0 0 0 4px rgba(250,204,21,.14); }

/* ── Closing CTA: giant outline type drifting with scroll ── */
.cta { padding: 140px 0 120px; }
.cta-wm {
  position: absolute; left: 0; right: 0; bottom: 4%; z-index: 0; pointer-events: none; white-space: nowrap;
  font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 24vw; line-height: .8; letter-spacing: -.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(250,204,21,.13);
  transform: translateX(calc((var(--p, .5) - .5) * -40%));
}
.cta .wrap { position: relative; z-index: 2; }

/* No stranded last words in paragraphs; balanced headline lines. */
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* ── Responsive ── */
@media (max-width: 960px) {
  .hero { min-height: 0; }
  .hero-grid { grid-template-columns: 1fr; gap: 20px; }
  .forge3d-tag.tag-2 { top: 0; right: 0; }
  .forge3d { max-width: 420px; aspect-ratio: 1 / 1; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .card-big { grid-row: span 1; }
  .chip-a { left: -6%; } .chip-b { right: -6%; }
  .fan { height: 530px; }
  .fan-stage { transform: scale(.82); }
}
@media (max-width: 640px) {
  .hero h1 { letter-spacing: -1px; }
  .forge3d { max-width: 340px; }
  .bento { grid-template-columns: 1fr; }
  .card-big, .card-wide { grid-column: auto; }
  .streak-num { font-size: 64px; }
  .streak-cells span { height: 26px; }
  .fan { height: 380px; --spread: 112px; }
  .fan-stage { transform: scale(.56); }
  .fan-sec { padding-top: 72px; }
  .chip { font-size: 11px; padding: 8px 11px; }
  .chip-a { left: -2%; top: 8%; } .chip-b { right: -2%; bottom: -3%; }
  .forge3d-tag { left: 0; bottom: 4%; }
  .forge3d-tag.tag-2 { left: auto; right: 0; top: 0; }
  .bands { height: 120px; }
  .band .marquee-track span { font-size: 17px; }
  .cta-wm { font-size: 34vw; }
}
@media (max-width: 360px) {
  .fan { height: 330px; --spread: 96px; }
  .fan-stage { transform: scale(.48); }
}
@media (prefers-reduced-motion: reduce) {
  .split .wi, .js .fx-in, .reveal { transform: none; translate: none; opacity: 1; filter: none; }
  .gold .wi, .gold.sheen { animation: none; }
  .forge3d canvas { transition: none; transform: none; }
  .shame-reason { clip-path: none; }
  .card, .tier, .shame, .showcase .device { transform: none; }
}