/* ============================================================
   ROULETTE CAPS — Coming Soon  (light / "angel dream")
   Main face:      Bebas Kai (local) → Bebas Neue (self-hosted fallback)
   Secondary face: Avenir Next Condensed Ultra Light (embedded)
   Type scale built on the golden ratio (φ = 1.618).
   No external requests — fonts are self-hosted.
   ============================================================ */

@font-face{
  font-family:'Bebas Neue';
  src:url('../assets/fonts/BebasNeue-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Avenir Next Condensed';
  src:url('../assets/fonts/AvenirNextCondensed-UltraLight.woff2') format('woff2');
  font-weight:200; font-style:normal; font-display:swap;
}

:root{
  --phi:1.618;

  --cream:#ece5d8;
  --sand:#e2d8c7;
  --sand-deep:#d9cdb6;
  --white:#ffffff;
  --soft:rgba(255,255,255,.82);
  --faint:rgba(255,255,255,.6);

  /* dark warm ink for the (light) form section */
  --ink:#3d3327;
  --ink-soft:rgba(61,51,39,.62);
  --line:rgba(61,51,39,.28);

  /* golden-ratio modular scale, fluid base ------------------------- */
  --f-base: clamp(.92rem, 1.05vw + .55rem, 1.18rem);          /* φ⁰  */
  --f-sub:  calc(var(--f-base) * 1.18);
  --f-fine: calc(var(--f-base) / var(--phi));                 /* φ⁻¹ */
  --f-word: clamp(2.9rem, 10.6vw, 7.6rem);                    /* ≈base·φ⁴ */
  --f-q:    clamp(1.9rem, 5.2vw, 3.3rem);                     /* ≈base·φ³ */

  --display:'Bebas Kai','Bebas Neue','Oswald',sans-serif;
  --sans:'Avenir Next Condensed','Avenir Next', sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  min-height:100%;
  background:var(--cream);
  color:var(--white);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }

/* ============================================================
   HERO
   ============================================================ */
.stage{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:clamp(3vh,5vh,7vh) 1.5rem clamp(3vh,4.5vh,6vh);
  overflow:hidden;
  isolation:isolate;
}
.bg{
  position:absolute; inset:0; z-index:-3;
  background:var(--cream) url('../assets/photo/travertine.jpg') center 56% / cover no-repeat;
  transform:scale(1.05);
  animation:drift 34s var(--ease) infinite alternate;
}
@keyframes drift{
  from{ transform:scale(1.05) translateY(0); }
  to  { transform:scale(1.11) translateY(-1.5%); }
}
/* tonal wash + bottom fade that blends the photo into the form section */
.bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to bottom,
      rgba(58,50,38,.20) 0%,
      rgba(58,50,38,.05) 22%,
      rgba(58,50,38,0)   42%,
      rgba(58,50,38,0)   80%,
      rgba(236,229,216,.55) 93%,
      var(--cream) 100%);
}

.brand{
  width:clamp(74px,9vw,118px);
  margin-top:clamp(1vh,2.5vh,3.5vh);
  color:var(--white);
  filter:
    drop-shadow(0 1px 1px rgba(72,56,34,.55))
    drop-shadow(0 6px 20px rgba(72,56,34,.34));
}
.emblem{ width:100%; height:auto; display:block; overflow:visible; }
.emblem .lp{ fill:var(--white); }

.head{
  margin-top:clamp(5vh,8.5vh,11vh);
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(.7rem,1.8vh,1.3rem);
}
.wordmark{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--f-word);
  line-height:.9;
  letter-spacing:.02em;
  text-indent:.02em;
  color:var(--white);
  text-shadow:0 2px 30px rgba(70,58,40,.28);
}
.tagline{
  font-family:var(--sans);
  font-weight:200;
  font-size:var(--f-sub);
  letter-spacing:.52em;
  text-indent:.52em;
  text-transform:lowercase;
  color:var(--white);
  text-shadow:0 1px 2px rgba(70,56,36,.45), 0 2px 22px rgba(70,56,36,.3);
}

/* scroll cue */
.scroll-hint{
  margin-top:auto;
  width:1px; height:clamp(34px,6vh,52px);
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.85));
  position:relative;
  animation:hintPulse 2.6s var(--ease) infinite;
}
@keyframes hintPulse{
  0%,100%{ opacity:.25; transform:translateY(-4px); }
  50%    { opacity:.9;  transform:translateY(2px);  }
}

/* ============================================================
   ENTER — favorite number (light section, dark ink)
   ============================================================ */
.enter{
  background:linear-gradient(180deg, var(--cream) 0%, var(--sand) 55%, var(--sand-deep) 100%);
  color:var(--ink);
  padding:clamp(13vh,16vh,20vh) 1.5rem clamp(9vh,11vh,13vh);
  display:flex; justify-content:center;
}
.enter__inner{ width:100%; max-width:42rem; text-align:center; }
.enter__q{
  font-family:var(--display);
  font-weight:400;
  font-size:var(--f-q);
  line-height:1;
  letter-spacing:.015em;
  color:var(--ink);
}
.enter__sub{
  font-family:var(--sans);
  font-weight:200;
  font-size:var(--f-sub);
  line-height:1.6;
  color:var(--ink-soft);
  max-width:36ch;
  margin:clamp(1rem,2.4vh,1.5rem) auto 0;
}

.form{ margin-top:clamp(2.2rem,5vh,3.4rem); }
.form__row{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:center; gap:clamp(1rem,3vw,1.8rem);
}
.field{
  background:transparent; border:0; border-bottom:1px solid var(--line);
  padding:.7rem .3rem; color:var(--ink);
  font-family:var(--sans); font-weight:200;
  font-size:calc(var(--f-base) * 1.12);
  letter-spacing:.04em; text-align:center;
  transition:border-color .4s var(--ease);
}
.field::placeholder{ color:rgba(61,51,39,.4); }
.field:focus{ outline:none; border-bottom-color:var(--ink); }
.field--num{ width:clamp(7rem,30vw,9rem); }
.field--email{ width:clamp(13rem,60vw,20rem); }

/* honeypot — hidden from people, tempting to bots */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; pointer-events:none; }

.submit{
  appearance:none; cursor:pointer;
  background:transparent; color:var(--ink);
  border:1px solid var(--ink); border-radius:40px;
  padding:.75rem 1.9rem;
  font-family:var(--sans); font-weight:200;
  font-size:.82rem; letter-spacing:.28em; text-indent:.28em;
  text-transform:uppercase;
  transition:background .4s var(--ease), color .4s var(--ease), opacity .3s;
}
.submit:hover,.submit:focus-visible{ background:var(--ink); color:var(--cream); outline:none; }
.is-loading .submit{ opacity:.5; pointer-events:none; }

.form__msg{
  min-height:1.3em; margin-top:1.3rem;
  font-family:var(--sans); font-weight:200; font-size:.95rem; letter-spacing:.04em;
  color:var(--ink); opacity:0; transition:opacity .4s var(--ease);
}
.form__msg:not(:empty){ opacity:1; }
.form__msg.is-error{ color:#9a4a39; }
.form__note{
  margin-top:1rem; font-family:var(--sans); font-weight:200;
  font-size:var(--f-fine); letter-spacing:.06em; color:var(--ink-soft);
}
.is-done .form__row,
.is-done .form__note{ display:none; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{
  background:var(--sand-deep);
  color:rgba(61,51,39,.6);
  text-align:center;
  padding:clamp(2.4rem,5vh,3.4rem) 1.5rem clamp(2.6rem,5vh,3.6rem);
  font-family:var(--sans); font-weight:200;
  font-size:var(--f-fine);
  letter-spacing:.34em; text-indent:.34em; text-transform:uppercase;
}

/* ============================================================
   LOAD CHOREOGRAPHY  (pure CSS — no JS needed to reveal)
   ============================================================ */
.lp{
  fill-opacity:0;
  stroke:var(--white); stroke-width:1.1;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1; stroke-dashoffset:1; stroke-opacity:1;
  animation:
    lpDraw 1.6s var(--ease) .15s forwards,
    lpFill .9s ease 1.15s forwards,
    lpStroke .8s ease 1.55s forwards;
}
@keyframes lpDraw  { to{ stroke-dashoffset:0; } }
@keyframes lpFill  { to{ fill-opacity:1; } }
@keyframes lpStroke{ to{ stroke-opacity:0; } }

.wordmark,.tagline{ opacity:0; }
.wordmark{ animation:riseIn 1.2s var(--ease) .85s forwards; }
.tagline { animation:riseIn 1.2s var(--ease) 1.15s forwards; }
@keyframes riseIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

/* form reveals on scroll (JS adds .in) */
.enter__inner{ opacity:0; transform:translateY(20px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.enter.in .enter__inner{ opacity:1; transform:none; }
.no-js .enter__inner{ opacity:1; transform:none; }   /* safety if JS never runs */

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:560px){
  .bg{ background-position:center 60%; }
  .head{ margin-top:clamp(8vh,13vh,16vh); }
  .field--email{ width:min(86vw,22rem); }
  .field--num{ width:min(86vw,22rem); }
  .submit{ width:auto; }
}

/* ============================================================
   MOTION PREFERENCES
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .bg{ animation:none; transform:scale(1.05); }
  .lp{ animation:none; fill-opacity:1; stroke-opacity:0; stroke-dashoffset:0; }
  .wordmark,.tagline{ animation:none; opacity:1; transform:none; }
  .scroll-hint{ animation:none; opacity:.6; }
  .enter__inner{ transition:none; opacity:1; transform:none; }
}