/* ========================================
   VEILLE — Teaser Site Styles
   ======================================== */

@font-face {
  font-family: 'GT America';
  src: url('fonts/GT-America-Standard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }

:root {
  --serif: 'Cormorant Display', Georgia, serif;
  --sans: 'GT America', system-ui, Arial, sans-serif;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: #0F0F0E;
  color: #E8E4DF;
  overflow: hidden;
  cursor: default;
}


/* ----------------------------------------
   Grain overlay
   ---------------------------------------- */

.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 9999;
  opacity: .022; transition: opacity .8s;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
}
.grain.hide { opacity: 0 }


/* ----------------------------------------
   Background layer
   ---------------------------------------- */

.bg-layer { position: fixed; inset: 0; z-index: 0 }


/* ----------------------------------------
   Through-line SVG
   ---------------------------------------- */

.through-line {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
.through-line path {
  fill: none;
  stroke: rgba(200, 195, 187, .1);
  stroke-width: 1;
  stroke-linecap: round;
}


/* ----------------------------------------
   Ambient line (landing)
   ---------------------------------------- */

.ambient-line {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.ambient-line path {
  fill: none;
  stroke: rgba(200, 195, 187, .04);
  stroke-width: .5;
  stroke-linecap: round;
  animation: ambPulse 4s ease-in-out infinite;
}
.ambient-line.gone { opacity: 0; transition: opacity 2s ease-out }

@keyframes ambPulse {
  0%   { stroke-opacity: .02;  stroke-width: .4 }
  50%  { stroke-opacity: .065; stroke-width: .65 }
  100% { stroke-opacity: .02;  stroke-width: .4 }
}


/* ----------------------------------------
   Landing prompt ("begin")
   ---------------------------------------- */

.land-prompt {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  opacity: 0; pointer-events: none; cursor: pointer;
  font-family: var(--sans); font-weight: 400; font-size: 1.1rem;
  color: #E8E4DF; letter-spacing: .04em; text-transform: lowercase;
  transition: opacity 1.2s ease-out;
  padding: 20px 32px;
}
.land-prompt.visible {
  opacity: .22; pointer-events: auto;
  animation: beginPulse 3.5s ease-in-out infinite;
}
.land-prompt:hover { opacity: .4; animation: none }
.land-prompt.gone {
  opacity: 0 !important; pointer-events: none;
  transition: opacity .5s ease-out; animation: none;
}

@keyframes beginPulse {
  0%   { opacity: .18 }
  50%  { opacity: .45 }
  100% { opacity: .18 }
}


/* ----------------------------------------
   Landing hint ("tap anywhere")
   ---------------------------------------- */

.land-hint {
  display: block;
  font-size: .68rem;
  letter-spacing: .1em;
  margin-top: 11px;
  opacity: 0;
  color: #E8E4DF;
  font-family: var(--sans);
  font-weight: 400;
  text-transform: lowercase;
  transition: opacity 500ms ease-out;
}
.land-prompt.visible .land-hint {
  opacity: .45;
  transition-delay: 600ms;
}
.land-prompt.gone .land-hint {
  transition-delay: 0ms;
}


/* ----------------------------------------
   Inactivity nudge
   ---------------------------------------- */

.inactivity-nudge {
  position: fixed;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease-in-out;
}
.inactivity-nudge.visible { opacity: 1; }
.inactivity-nudge.dismiss { transition: opacity 120ms ease-out; }

.nudge-text {
  font-family: var(--sans);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .1em;
  color: #E8E4DF;
  text-transform: lowercase;
}
.nudge-chevron {
  font-size: .85rem;
  color: #E8E4DF;
  opacity: .5;
  display: block;
  line-height: 1;
}


/* ----------------------------------------
   Custom cursor circle
   ---------------------------------------- */

.cursor-circle {
  position: fixed;
  top: 0; left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(232, 228, 223, 0.6);
  background: none;
  pointer-events: none;
  z-index: 9998;
  opacity: 0;
  transition: opacity 300ms ease;
  transform: translate(-50%, -50%);
  will-change: transform;
}
.cursor-circle.visible { opacity: 1; }

.has-custom-cursor .click-layer { cursor: none; }
.has-custom-cursor .land-prompt { cursor: none; }


/* ----------------------------------------
   Click overlay
   ---------------------------------------- */

.click-layer {
  position: fixed; inset: 0;
  z-index: 6; cursor: default;
}


/* ----------------------------------------
   Scene structure
   ---------------------------------------- */

.scene { position: relative; width: 100%; z-index: 3 }
.scene-sticky {
  position: sticky; top: 0;
  height: 100vh; width: 100%; overflow: hidden;
}


/* ----------------------------------------
   Word reveal elements
   ---------------------------------------- */

/* Inline words (opacity only) */
.w {
  opacity: 0;
  transition: opacity 420ms ease-out, transform 420ms ease-out;
  will-change: opacity, transform;
}
.w.on  { opacity: 1 }
.w.off { opacity: 0; transition: opacity 120ms ease-out }

/* Positioned words (opacity + translateY entrance, opacity-only exit) */
.pw {
  position: absolute;
  opacity: 0; transform: translateY(7px);
  transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.pw.on  { opacity: 1; transform: translateY(0) }
.pw.off { opacity: 0; transform: translateY(0); transition: opacity 120ms ease-out }

.pw.cx { left: 50%; transform: translateX(-50%) translateY(7px) }
.pw.cx.on  { transform: translateX(-50%) translateY(0) }
.pw.cx.off { transform: translateX(-50%) translateY(0); transition: opacity 120ms ease-out }

.pw.still    { transform: none }
.pw.still.cx { transform: translateX(-50%) }
.pw.still.on { transform: none }
.pw.still.cx.on { transform: translateX(-50%) }


/* ========================================
   SCENE 1 — Hero
   ======================================== */

.scene-1 { height: 600vh }

.hero-wrap {
  position: absolute; bottom: 22vh;
  left: max(7vw, 36px); max-width: 560px;
  white-space: nowrap;
}
.hero-break { display: block; height: 0 }
.hero-wrap .w {
  display: inline;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.4rem);
  line-height: 1.15; color: #E8E4DF;
  letter-spacing: -.02em; font-optical-sizing: auto;
}


/* ========================================
   SCENE 2 — Ingredients / Process / Ready
   ======================================== */

.scene-2 { height: 1800vh }

/* Ingredients (left) */
.ingr {
  left: max(8vw, 40px);
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.3rem, 1.8vw, 1.6rem);
  color: #C8C3BB; letter-spacing: .01em;
}
.i1 { top: 30vh }
.i2 { top: 35vh }
.i3 { top: 40vh }
.i4 { top: 45vh }

/* Process (right) */
.proc {
  right: max(8vw, 40px);
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  color: #C8C3BB; text-align: right;
}
.p0 { top: 26vh }
.p1 { top: 32vh }
.p2 { top: 38vh }
.p3 { top: 44vh }

/* Ready line */
.ready-wrap {
  position: absolute; bottom: 28vh;
  right: max(8vw, 40px); text-align: right;
}
.ready-wrap .w {
  display: inline;
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  color: #C8C3BB;
}

/* Waiting (own line, below ready) */
.waiting-line {
  right: max(8vw, 40px); bottom: 22vh;
  font-family: var(--sans); font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw, 1.45rem);
  color: #C8C3BB; text-align: right;
}


/* ========================================
   SCENE 4 — Closing
   ======================================== */

.scene-4 { height: 1600vh }

.cl {
  font-family: var(--serif); font-weight: 400;
  color: #1A1917; letter-spacing: -.01em;
  white-space: nowrap;
}
.c-wake   { top: 30vh; font-size: clamp(1.5rem, 2.6vw, 2.3rem) }
.c-fridge  { top: 37vh; font-size: clamp(1.5rem, 2.6vw, 2.3rem) }
.c-begin   { top: 44vh; font-size: clamp(1.5rem, 2.6vw, 2.3rem) }

/* Brand reveal */
.c-ritual { top: 34vh; color: #1A1917 }
.veille-mark-closing { width: clamp(240px, 52vw, 520px); height: auto; display: block }

.c-soon {
  top: 58vh;
  font-family: var(--sans); font-weight: 400; font-size: .78rem;
  color: #1A1917; letter-spacing: .12em; text-transform: lowercase;
}
.c-soon.on { opacity: .3 }

/* Email capture */
.c-email { top: 66vh; width: clamp(240px, 52vw, 520px) }
.c-email-inner {
  position: relative;
  border-bottom: 1px solid rgba(26, 25, 23, .18);
}
.c-email .email-input {
  background: none; border: none;
  font-family: var(--sans); font-weight: 400; font-size: .92rem;
  color: #1A1917; width: 100%;
  padding: 12px 48px 12px 0;
  outline: none; text-align: left; letter-spacing: .02em;
}
.c-email .email-input::placeholder { color: rgba(26, 25, 23, .3) }
.c-email-inner:focus-within { border-bottom-color: rgba(26, 25, 23, .4) }

.c-email .email-arrow {
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: .72rem; color: rgba(26, 25, 23, .25);
  cursor: pointer; transition: color .3s ease;
  font-family: var(--sans); font-weight: 400;
  letter-spacing: .1em; text-transform: lowercase;
  background: none; border: none; padding: 8px; line-height: 1;
}
.c-email .email-arrow:hover { color: rgba(26, 25, 23, .5) }

.c-email .noted {
  font-family: var(--sans); font-weight: 400; font-size: .92rem;
  color: #1A1917; opacity: .35; text-align: left;
  padding: 12px 0; display: none;
}
.c-email .noted.on { display: block }
.c-email .email-input.off { display: none }


/* Scene 4 footer (inside sticky container) */
.c-footer {
  position: absolute;
  bottom: 32px;
  left: max(7vw, 36px);
  right: max(7vw, 36px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans); font-weight: 400; font-size: .72rem;
  color: #1A1917; opacity: .3;
}
.c-footer a {
  color: #1A1917; text-decoration: none;
  transition: opacity .3s;
}
.c-footer a:hover { opacity: .7 }

@media (max-width: 800px) {
  .c-footer { left: 28px; right: 28px; bottom: 28px; }
}


/* ========================================
   Narrative recap overlay
   ======================================== */

.narrative-overlay {
  position: fixed; inset: 0;
  z-index: 8;
  pointer-events: none;
  background: #F5F2ED;
  /* Instantly hidden — no fade on the background itself */
  visibility: hidden;
}

.narrative-overlay.visible {
  visibility: visible;
  pointer-events: auto;
}

.narrative-text {
  position: absolute;
  top: 50%; left: max(7vw, 36px);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 250ms ease-out;
}

.narrative-overlay.visible .narrative-text {
  opacity: 1;
}

.narrative-text p {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.25rem, 2.2vw, 2rem);
  line-height: 1.25;
  letter-spacing: -.02em;
  font-optical-sizing: auto;
  color: #1A1917;
  margin: 0;
}

.narrative-text br {
  display: block;
  content: '';
  margin-top: .55em;
}


/* ========================================
   Footer
   ======================================== */

/* Footer is now inside Scene 4's sticky container (.c-footer) */


/* ========================================
   Mobile
   ======================================== */

@media (max-width: 800px) {
  .hero-wrap { white-space: normal; right: 36px }
  .proc { right: 28px }
  .ready-wrap { right: 28px }
  .waiting-line { right: 28px }
  .c-email { width: calc(100vw - 56px) }
}


/* ========================================
   Reduced motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .ambient-line path { animation: none }
  .land-prompt.visible { animation: none }

  .pw {
    transform: none;
    transition: opacity 150ms ease-out;
  }
  .pw.cx     { transform: translateX(-50%) }
  .pw.on     { transform: none }
  .pw.cx.on  { transform: translateX(-50%) }
  .pw.off    { transition: opacity 120ms ease-out }

  .w { transition: opacity 150ms ease-out }
}