/* ADHD LABS — brand tokens (see /adhdlabsbrand skill) */
:root {
  --grey: #282828;        /* ADHD LABS GREY */
  --skydeas-blue: #003EFF; /* shop product stage */
  --white: #FFFFFF;
  --mid: #8A8A8A;
  --bg: #FFFFFF;          /* driven by scroll in main.js */
  --fg: #282828;          /* driven by scroll in main.js */
  --line: color-mix(in srgb, var(--fg) 14%, transparent);
  --gutter: clamp(16px, 3vw, 40px);
  --ease: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-intro { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select { font: inherit; color: inherit; }

.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.dim { opacity: .5; }
.label { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.blink { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.led { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .2; } }

/* ---------------- NAV ---------------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding: 14px var(--gutter);
  mix-blend-mode: difference; color: #fff;
  opacity: 0; transform: translateY(-8px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
body.is-ready .nav { opacity: 1; transform: none; }
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav-side { display: flex; gap: clamp(14px, 3vw, 36px); font-size: 13px; }
.nav-side--right { justify-content: flex-end; }
.nav-side a { position: relative; }
.nav-side a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav-side a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-logo { position: relative; display: grid; place-items: center; height: 24px; }
.nav-logo img { grid-area: 1 / 1; width: auto; transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); }
.nav-logo .logo-word { height: 14px; }
.nav-logo .logo-mark { height: 24px; opacity: 0; transform: scale(.8); }
body.in-hero .nav-logo .logo-mark { opacity: 1; transform: none; }
body.in-hero .nav-logo .logo-word { opacity: 0; transform: scale(.9); }

/* ---------------- CURSOR (fine pointers only) ---------------- */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none;
    width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
    background: #fff; border: 1px solid #fff; mix-blend-mode: difference;
    transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s, opacity .3s;
  }
  .cursor.is-hover { width: 32px; height: 32px; margin: -16px 0 0 -16px; background: transparent; }
  body.in-hero .cursor { width: 80px; height: 80px; margin: -40px 0 0 -40px; background: transparent; opacity: .5; }
  body.in-hero .cursor.is-hover { width: 32px; height: 32px; margin: -16px 0 0 -16px; opacity: 1; }
  .cursor.is-hidden { opacity: 0 !important; }
}

/* ---------------- HERO ---------------- */
.hero { height: 420vh; position: relative; }
.hero-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.hero-rect {
  position: absolute; inset: 0; background: var(--grey); color: #fff;
  clip-path: inset(50% 50% 50% 50%);
}
body.intro-1 .hero-rect { animation: rectGrow 1.6s var(--ease) forwards; }
body.is-ready .hero-rect { clip-path: inset(0 0 0 0); animation: none; }
@keyframes rectGrow {
  0%   { clip-path: inset(49.6% 50% 49.6% 50%); }
  35%  { clip-path: inset(49.6% 22% 49.6% 22%); }
  62%  { clip-path: inset(24% 22% 24% 22%); }
  100% { clip-path: inset(0 0 0 0); }
}
.rain { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.hero-logo {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: min(86vw, 1400px); height: auto;
  transform: translate(-50%, -50%);
  clip-path: inset(0 100% 0 0); opacity: 0;
  will-change: transform, opacity;
}
body.intro-2 .hero-logo, body.is-ready .hero-logo { transition: clip-path 1.1s var(--ease), opacity .3s; clip-path: inset(0 0 0 0); opacity: 1; }
.hero-meta { position: absolute; z-index: 3; color: #fff; opacity: 0; transition: opacity .8s ease .2s; line-height: 1.7; }
body.intro-1 .hero-meta--tr, body.intro-2 .hero-meta, body.is-ready .hero-meta { opacity: 1; }
.hero-meta--tl { top: 72px; left: var(--gutter); }
.hero-meta--tr { top: 72px; right: var(--gutter); }
.hero-meta--bl { bottom: var(--gutter); left: var(--gutter); }
.hero-meta--br { bottom: var(--gutter); right: var(--gutter); }
/* top-right: intro counter, then a scroll meter that fills through the rain */
.hero-meta--tr { display: grid; justify-items: end; }
.hero-meta--tr > * { grid-area: 1 / 1; transition: opacity .6s ease; }
.scroll-meter { display: flex; align-items: center; gap: 12px; opacity: 0; }
body.is-ready .intro-count { opacity: 0; }
body.is-ready .scroll-meter { opacity: 1; }
.scroll-meter-track { position: relative; width: 72px; height: 1px; background: rgba(255,255,255,.25); overflow: hidden; }
.scroll-meter-track i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.scroll-meter-track::after { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 1px; background: #fff; animation: meterScan 1.8s var(--ease) infinite; }
@keyframes meterScan { from { transform: translateX(-14px); } to { transform: translateX(72px); } }
.hero-white { position: absolute; inset: 0; background: #fff; opacity: 0; z-index: 4; pointer-events: none; }

/* ---------------- WORD REVEAL ---------------- */
.words .w { display: inline-block; opacity: .14; transition: opacity .5s ease; white-space: pre; }
.words .w.on { opacity: 1; }
.words .dim-word .w.on { opacity: .45; }

/* ---------------- STATEMENT ---------------- */
.statement { height: 220vh; position: relative; }
.statement-stick { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; padding: 0 var(--gutter); }
.statement-text {
  font-weight: 400; text-align: center; max-width: 16ch;
  font-size: clamp(40px, 7.4vw, 124px); line-height: 1; letter-spacing: -.035em;
}

/* ---------------- ABOUT ---------------- */
.about { height: 260vh; position: relative; }
.about-stick { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: clamp(20px, 4vh, 44px); padding: 64px var(--gutter) 32px; }
.about-heading {
  font-weight: 400; font-size: clamp(34px, 5vw, 84px); line-height: 1.02; letter-spacing: -.03em;
  max-width: 17ch; text-wrap: balance;
}
.about-body {
  display: grid; gap: clamp(10px, 1.8vh, 18px);
  max-width: 50ch; font-size: clamp(15px, .55vw + 11px, 19px); line-height: 1.55;
}
.about-body p { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); text-wrap: pretty; text-wrap: balance; }
.about-body p.on { opacity: .72; transform: none; }
.about-body .about-close.on { opacity: 1; }
@media (max-height: 700px) and (max-width: 560px) { .about-body { font-size: 14px; line-height: 1.5; } }
.p-desc + .p-desc { margin-top: 14px; }

/* ---------------- VENTURES (focus-areas layout) ---------------- */
.ventures { padding: 18vh var(--gutter) 22vh; }
.ventures-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 28px; }
.venture { border-top: 1px solid var(--line); }
.venture:last-child { border-bottom: 1px solid var(--line); }
.venture-row {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: 70px 1fr minmax(0, 46%) 24px; align-items: center; gap: 16px;
  padding: 22px 0;
}
.venture-row:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.v-idx { opacity: .45; }
.v-name { font-size: clamp(40px, 6.4vw, 104px); line-height: 1; letter-spacing: -.04em; transition: opacity .4s, transform .6s var(--ease-out); }
.v-tags { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; font-size: 10px; }
.v-name .reg { font-size: .32em; vertical-align: 1.6em; margin-left: .06em; letter-spacing: 0; }
.v-toggle { font-size: 18px; text-align: right; transition: transform .5s var(--ease); }
.venture-list:hover .venture:not(:hover):not(.is-open) .v-name { opacity: .3; }
.venture-row:hover .v-name { transform: translateX(10px); }
.venture.is-open .v-toggle { transform: rotate(45deg); }
.venture-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .8s var(--ease); }
.venture.is-open .venture-panel { grid-template-rows: 1fr; }
.panel-inner { overflow: hidden; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(20px, 6vw, 120px); }
.venture.is-open .panel-inner { padding-bottom: 40px; }
.p-col { padding-top: 8px; min-width: 0; }
.p-kicker { margin-bottom: 16px; opacity: .6; }
.p-desc { font-size: 17px; line-height: 1.5; max-width: 42ch; }
.p-spec { margin-top: 24px; border-top: 1px solid var(--line); }
.p-spec div, .info div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.p-spec dt, .info dt { opacity: .5; }
.p-links { margin-top: 22px; display: grid; }
.p-links > a, .p-links > span { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.p-links > a:hover { padding-left: 6px; transition: padding .3s var(--ease-out); }
.p-links .soon { opacity: .4; }

.waitlist-form { display: flex; border: 1px solid var(--line); }
.waitlist-form input[type=email] { flex: 1; min-width: 0; background: transparent; border: 0; padding: 14px; font-family: var(--mono); font-size: 12px; outline: none; }
.waitlist-form input::placeholder { color: currentColor; opacity: .4; }
.waitlist-form button { border: 0; background: var(--fg); color: var(--bg); padding: 0 16px; cursor: pointer; white-space: nowrap; transition: opacity .2s; }
.waitlist-form button:hover { opacity: .85; }
.form-msg { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; padding: 14px 0; }
.form-msg.err { opacity: .7; }

/* lab log — one shared log across all ventures */
.lablog-section { padding: 18vh var(--gutter) 6vh; }
.lablog-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; }
.log { list-style: none; border-top: 1px solid var(--line); }
.log li { display: grid; grid-template-columns: 110px 280px 1fr auto; align-items: baseline; gap: 6px 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.log .ven, .log .ts, .log .ago { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.log .ts, .log .ago { opacity: .5; }
.log .ago { text-align: right; }
.log .txt { font-size: 16px; }
.log .txt a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.log .txt a:hover { opacity: .7; }
.log li.upcoming .ago { opacity: 1; }
.log li.upcoming .ts::before { content: "● "; animation: pulse 1.6s infinite; }

/* ---------------- SHOP ---------------- */
.shop { position: relative; } /* height set in JS */
.shop-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.shop-head { position: absolute; top: 72px; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; }
.shop-track { display: flex; align-items: stretch; gap: clamp(16px, 2vw, 28px); padding: 0 var(--gutter); will-change: transform; width: max-content; }
.shop-title { width: min(80vw, 520px); display: flex; flex-direction: column; justify-content: space-between; padding-right: 4vw; }
.shop-title h2 { font-weight: 400; font-size: clamp(44px, min(9vw, 15vh), 150px); line-height: .92; letter-spacing: -.045em; }
/* optical left alignment: cancel each line's first-glyph side bearing (Inter Tight: T .024em, L .064em, S .033em) */
.shop-title h2 .ln { display: block; }
.shop-title h2 .ln-t { margin-left: -.024em; }
.shop-title h2 .ln-l { margin-left: -.064em; }
.shop-title h2 .ln-s { margin-left: -.033em; }
.shop-title p { margin-top: 24px; line-height: 1.8; }
.product { width: clamp(200px, min(26vw, 44vh), 400px); display: flex; flex-direction: column; gap: 14px; }
.product-media { position: relative; aspect-ratio: 4 / 5; background: var(--skydeas-blue); overflow: hidden; }
.product-media canvas, .product-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* product renders: floating, turning between angles */
.render { position: absolute; inset: 10% 8% 12%; perspective: 900px; }
.product-media.has-render::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(60% 50% at 50% 45%, rgba(255,255,255,.22), transparent 70%); }
.render { z-index: 0; }
.render-float { position: absolute; inset: 0; animation: float 5.2s ease-in-out infinite; animation-delay: var(--delay, 0s); }
.render-turn { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.55,0,.75,.2); }
.render-turn.turning-out { transform: rotateY(90deg); }
.render-turn.turning-in { transform: rotateY(-90deg); transition: none; }
.render-turn:not(.turning-out):not(.turning-in) { transition-timing-function: cubic-bezier(.25,.8,.45,1); }
.render-turn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: drop-shadow(0 18px 24px rgba(0,0,0,.45)); }
.render-turn img.on { opacity: 1; }
.render-shadow { position: absolute; left: 22%; right: 22%; bottom: -6%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,10,60,.6), transparent); animation: shadow 5.2s ease-in-out infinite; animation-delay: var(--delay, 0s); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-4%) rotate(1.2deg); } }
@keyframes shadow { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.8); opacity: .55; } }
/* iPod — photo body (540×900) with our screens set into its display (inner screen: x 52–486, y 53–379) */
.ipod { position: absolute; left: 50%; top: 52%; height: 88%; aspect-ratio: 540 / 900; transform: translate(-50%, -50%); filter: drop-shadow(0 18px 24px rgba(0,10,60,.4)); }
.ipod-body { position: absolute; inset: 0; width: 100%; height: 100%; }
.ipod-screen { position: absolute; left: 9.63%; top: 5.89%; width: 80.56%; height: 36.33%; background: #000; overflow: hidden; border-radius: 1.2% / 1.6%; }
.ipod-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; image-rendering: pixelated; }
.ipod-screen img.on { opacity: 1; }
.ipod-screen.flick img.on { animation: flick .16s steps(2) 1; }
@keyframes flick { 0% { opacity: .2; } 100% { opacity: 1; } }
.ipod-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgba(255,255,255,.1), rgba(255,255,255,0) 40%); pointer-events: none; }
.product-media .tag { position: absolute; top: 12px; left: 12px; color: #fff; z-index: 1; }
.product-media .id { position: absolute; bottom: 12px; right: 12px; color: #fff; z-index: 1; opacity: .6; }
.product-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.product-name { font-size: 20px; letter-spacing: -.01em; }
.product .mono { font-size: 10px; }
/* keep every card's rows on the same baselines: names reserve 2 lines, sub-line never wraps */
.product-head { align-items: flex-start; min-height: calc(2 * 1.2em); font-size: 20px; }
.product-head .product-name { font-size: inherit; line-height: 1.2; }
.product-head .mono { padding-top: .45em; flex: none; }
.product-sub { white-space: nowrap; }
.product-sub .product-type { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.product-desc { font-size: 13px; line-height: 1.5; opacity: .7; text-wrap: pretty; }
/* whole card is clickable; CTA slides up on hover/focus */
a.product { color: inherit; text-decoration: none; }
.product-media .cta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 14px 12px; text-align: center;
  background: var(--fg); color: var(--bg); transform: translateY(101%); transition: transform .45s var(--ease-out);
}
a.product:hover .cta, a.product:focus-visible .cta { transform: none; }
a.product:hover .product-name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a.product:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
@media (hover: none) { .product-media .cta { transform: none; } }
.shop-notify { width: min(84vw, 440px); display: flex; flex-direction: column; justify-content: flex-end; padding-left: 2vw; }
.shop-notify h3 { font-weight: 400; font-size: clamp(28px, 3vw, 44px); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 24px; }
.shop-progress { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter); height: 1px; background: var(--line); }
.shop-progress span { display: block; height: 100%; background: currentColor; transform-origin: left; transform: scaleX(0); }

/* ---------------- PHILOSOPHY / CONTACT / FOOTER ---------------- */
.philosophy { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 16vh var(--gutter); }
.philosophy-link { color: inherit; text-decoration: none; }
.philosophy-link .philosophy-arrow { display: inline-block; font-size: .45em; vertical-align: .9em; transition: transform .5s var(--ease-out); }
.philosophy-link:hover .philosophy-arrow { transform: translate(.15em, -.15em); }
.philosophy-link:hover .w { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.philosophy-text { font-size: clamp(52px, 10vw, 180px); line-height: .95; letter-spacing: -.05em; max-width: 10ch; }

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 120px); padding: 12vh var(--gutter) 16vh; border-top: 1px solid var(--line); }
.contact-heading { font-weight: 400; font-size: clamp(44px, 6vw, 96px); line-height: .98; letter-spacing: -.04em; margin: 24px 0; }
.contact-sub { max-width: 40ch; opacity: .72; margin-bottom: 36px; }
.info { border-top: 1px solid var(--line); }
.info a:hover { text-decoration: underline; }
.contact-form { margin-top: 24px; display: grid; }
.contact-form .row { display: grid; grid-template-columns: 70px 1fr; align-items: center; border-bottom: 1px solid var(--line); }
.contact-form .row:first-of-type { border-top: 1px solid var(--line); }
.contact-form input, .contact-form select { background: transparent; border: 0; outline: none; padding: 18px 0; font-size: 16px; width: 100%; -webkit-appearance: none; appearance: none; }
.contact-form select option { color: #282828; }
.contact-form input::placeholder { color: currentColor; opacity: .35; }
.submit { margin-top: 28px; justify-self: start; display: inline-flex; gap: 14px; align-items: center; padding: 16px 22px; border: 1px solid currentColor; background: transparent; cursor: pointer; transition: background .3s, color .3s; }
.submit:hover { background: var(--fg); color: var(--bg); }

.footer { padding: 0 var(--gutter); border-top: 1px solid var(--line); }
.footer-row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0; font-variant-numeric: tabular-nums; }
.footer-links { display: flex; gap: 20px; }
.ticker { overflow: hidden; border-top: 1px solid var(--line); padding: 12px 0; margin: 0 calc(var(--gutter) * -1); font-size: 9px; opacity: .35; }
.ticker-inner { display: flex; width: max-content; animation: tick 50s linear infinite; }
.ticker-inner span { white-space: nowrap; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
  .venture-row { grid-template-columns: 1fr 24px; }
  .v-idx, .v-tags { display: none; }
  .panel-inner { grid-template-columns: 1fr; gap: 32px; }
  .log li { grid-template-columns: 1fr auto; }
  .log .ven { grid-column: 1; grid-row: 1; }
  .log .ago { grid-column: 2; grid-row: 1; }
  .log .ts { grid-column: 1 / -1; grid-row: 2; }
  .log .txt { grid-column: 1 / -1; grid-row: 3; }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .nav-side { font-size: 12px; gap: 14px; }
  .nav-logo .logo-word { height: 11px; }
  .nav-logo .logo-mark { height: 20px; }
  .hero-meta--tl, .hero-meta--tr { top: 56px; }
  .shop-head { top: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.nowrap { white-space: nowrap; }