/* =========================================================================
   lab.upscaleai.fr — styles
   Minimal. Everything visual lives in WebGL; DOM is just chrome and text.
   ========================================================================= */

:root {
  /* Cool, desaturated baseline matching Scene 1 reference photograph.
     Scenes 2-6 tint the page background via JS (see main.js::updatePageTint). */
  --bg:        #0a0c0e;
  --fg:        #e6e7ea;
  --fg-dim:    rgba(230,231,234,.6);
  --fg-faint:  rgba(230,231,234,.28);
  --accent:    #ffd34d;   /* sailor yellow, used sparingly */

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--fg); }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none; /* we draw a custom one */
}
@media (pointer: coarse) { body { cursor: auto; } .cursor { display: none; } }

/* --- loader ------------------------------------------------------------ */
.loader {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--bg);
  transition: opacity .9s ease;
}
.loader__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--fg);
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50%      { opacity: 1;  transform: scale(1.2); }
}
body:not(.loading) .loader { opacity: 0; pointer-events: none; }

/* --- custom cursor ----------------------------------------------------- */
.cursor { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.cursor__dot, .cursor__ring {
  position: absolute; top: 0; left: 0;
  border-radius: 50%;
  transform: translate3d(-50%,-50%,0);
  will-change: transform, width, height, opacity;
  mix-blend-mode: difference;
}
.cursor__dot  { width: 6px;  height: 6px;  background: var(--fg); }
.cursor__ring {
  width: 32px; height: 32px;
  border: 1px solid var(--fg); background: transparent;
  transition: width .25s ease, height .25s ease, opacity .25s ease;
}
.cursor.is-hover .cursor__ring { width: 56px; height: 56px; opacity: .4; }
.cursor.is-hover .cursor__dot  { opacity: .3; }

/* --- canvas ------------------------------------------------------------ */
#gl {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display: block;
}

/* --- scroll spacer ----------------------------------------------------- */
/* Desktop: 6000px of virtual scroll per spec. Mobile: compressed to 4200. */
.scroller { height: 6000px; width: 1px; }
@media (max-width: 720px) { .scroller { height: 4200px; } }

/* --- text overlays ----------------------------------------------------- */
.overlays {
  position: fixed; inset: 0; z-index: 20;
  pointer-events: none;
  display: grid; place-items: center;
}
.overlay {
  position: absolute;
  opacity: 0;
  transition: opacity .7s cubic-bezier(.22,.8,.24,1), transform .9s cubic-bezier(.22,.8,.24,1);
  transform: translateY(12px);
  text-align: center;
  padding: 0 6vw;
  max-width: 1200px;
}
.overlay.is-in { opacity: 1; transform: translateY(0); }
.overlay .line {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(40px, 7vw, 128px);
  letter-spacing: -0.03em;
  line-height: 1;
  text-wrap: balance;
  /* subtle text shadow so text remains readable against bright fractal scenes */
  text-shadow: 0 2px 40px rgba(0,0,0,.45);
}
.overlay[data-scene="1"] { bottom: 12vh; }
.overlay[data-scene="2"] { top: 14vh; }
.overlay[data-scene="3"] { top: 14vh; }
.overlay[data-scene="5"] { bottom: 14vh; }

/* SplitText-style char reveal (done via JS without the GSAP plugin) */
.overlay .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(30%);
  transition: opacity .7s, transform .7s cubic-bezier(.22,.8,.24,1);
  transition-delay: calc(var(--i) * 26ms);
}
.overlay.is-in .char { opacity: 1; transform: translateY(0); }

/* --- CTA --------------------------------------------------------------- */
.cta {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
.cta.is-in { opacity: 1; }
.cta__btn {
  pointer-events: auto;
  margin-top: 28vh;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 28px;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  color: var(--fg);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  background: rgba(10,12,14,.4);
  backdrop-filter: blur(8px);
  transition: transform .35s cubic-bezier(.22,.8,.24,1),
              border-color .35s ease,
              background .35s ease,
              box-shadow .6s ease;
  box-shadow: 0 0 0 rgba(255,255,255,0);
}
.cta__btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 60px rgba(255,255,255,.12);
}
.cta__arrow {
  display: inline-block;
  transition: transform .35s cubic-bezier(.22,.8,.24,1);
}
.cta__btn:hover .cta__arrow { transform: translate(3px,-3px); }

/* --- chrome ------------------------------------------------------------ */
.chrome {
  position: fixed; inset: 0; z-index: 40;
  pointer-events: none;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
}
.chrome__corner { position: absolute; padding: 22px 26px; display: flex; align-items: center; gap: 8px; }
.chrome__corner--tl { top: 0; left: 0; }
.chrome__corner--tr { top: 0; right: 0; }
.chrome__corner--bl { bottom: 0; left: 0; }
.chrome__corner--br { bottom: 0; right: 0; pointer-events: auto; }
.chrome__dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2.2s ease-in-out infinite;
}
.chrome__btn {
  pointer-events: auto;
  background: transparent;
  border: 1px solid var(--fg-faint);
  color: var(--fg-dim);
  padding: 8px 12px;
  border-radius: 999px;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  cursor: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s ease, border-color .2s ease;
}
.chrome__btn:hover { color: var(--fg); border-color: var(--fg-dim); }
.chrome__btn-icon[data-state="on"]  { color: var(--accent); }

/* --- scene-title transition ------------------------------------------- */
#scene-title, #scene-counter { transition: opacity .35s ease; }
.chrome.is-swapping #scene-title, .chrome.is-swapping #scene-counter { opacity: 0; }

/* --- tweaks panel (minimal; ships via tweaks.js) ---------------------- */
.tweaks {
  position: fixed; right: 22px; bottom: 70px; z-index: 60;
  width: 280px;
  background: rgba(14,16,18,.92);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 14px 16px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg);
  letter-spacing: 0.02em;
  pointer-events: auto;
  display: none;
}
.tweaks.is-open { display: block; }
.tweaks__title {
  text-transform: uppercase; letter-spacing: .15em;
  font-size: 10px; color: var(--fg-dim);
  margin-bottom: 10px; display: flex; justify-content: space-between;
}
.tweaks__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.tweaks__row label { color: var(--fg-dim); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.tweaks__row input[type=range] { flex: 1; accent-color: var(--accent); }
.tweaks__seg {
  display: grid; grid-auto-flow: column; gap: 4px;
  background: rgba(255,255,255,.04);
  padding: 3px; border-radius: 8px;
  width: 100%;
}
.tweaks__seg button {
  all: unset;
  text-align: center;
  padding: 6px 4px;
  border-radius: 6px;
  font: inherit;
  color: var(--fg-dim);
  cursor: none;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
}
.tweaks__seg button.is-active { background: var(--accent); color: #000; }
.tweaks__close {
  all: unset; cursor: none; color: var(--fg-dim);
  font-size: 14px; line-height: 1;
}

/* --- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .loader__dot, .chrome__dot { animation: none; opacity: .7; }
  .overlay { transition: opacity .2s linear; }
  .overlay .char { transition: opacity .2s linear; transform: none; }
}