/* ============================================================
   TOWN PLAY — Coming Soon
   Palette sourced exclusively from the Town Play brand guide:
   Heritage Red, Mustard Gold, Deep Green, Warm Teal,
   Warm Cream, Natural Wood.
   ============================================================ */

/* ---------- Font (self-hosted, latin, variable) ---------- */
@font-face{
  font-family:'Fraunces';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('../assets/fonts/fraunces-latin-full-normal.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root{
  --red:#B04A3C;
  --gold:#E3A72F;
  --green:#1F5A4A;
  --teal:#0082A8;
  --cream:#F3EBDD;
  --cream-deep:#E9DEC9;
  --wood:#A77A4A;

  --display:'Fraunces','Cooper Black','Georgia',serif;

  --ease-rise:cubic-bezier(.22,1.2,.36,1);   /* slight overshoot, like a pop-up */
  --ease-soft:cubic-bezier(.4,0,.2,1);

  /* animation timeline (seconds) */
  --t-lamp:.2s;
  --t-logo:.35s;
  --t-line:1.15s;
  --t-w1:1.45s;
  --t-w2:1.65s;
  --t-w3:1.85s;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{
  -webkit-text-size-adjust:100%;
  scroll-padding-top:env(safe-area-inset-top,0px);
}
body{
  font-family:var(--display);
  background:var(--cream);
  color:var(--green);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---------- Stage ---------- */
.stage{
  position:relative;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(1.6rem,4.5vh,2.6rem);
  padding:
    calc(env(safe-area-inset-top,0px) + clamp(1.5rem,5vh,3rem))
    clamp(1.25rem,6vw,3rem)
    calc(env(safe-area-inset-bottom,0px) + clamp(1.5rem,5vh,3rem));
  text-align:center;
  isolation:isolate;
}

/* Warm stone vignette at the edges + the "lamp light" behind the logo */
.stage::before{
  content:'';
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, var(--cream-deep) 100%);
}
.lamp{
  position:absolute;
  left:50%;top:38%;
  width:min(78vw,520px);
  aspect-ratio:1;
  translate:-50% -50%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle, rgba(227,167,47,.30) 0%, rgba(227,167,47,.14) 38%, rgba(227,167,47,0) 70%);
  opacity:0;
  filter:blur(6px);
  pointer-events:none;
}

/* ---------- Logo ---------- */
.logo{
  display:block;
  width:clamp(230px,68vw,360px);
  height:auto;
  opacity:0;
  scale:.96;
  will-change:opacity,transform;
}

/* ---------- Ground line (echo of the baseline in the logo) ---------- */
.ground{
  width:clamp(120px,32vw,200px);
  height:3px;
  border-radius:2px;
  background:var(--wood);
  scale:0 1;
  transform-origin:center;
}

/* ---------- The three words ---------- */
.words{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1;
}
.word{
  display:block;
  overflow:hidden;            /* each word rises out of its own line */
  padding:.06em .12em .22em;  /* room for descenders (g, y) + overshoot */
  margin-top:-.2em;
}
.word > span{
  display:block;
  font-family:var(--display);
  font-weight:800;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  font-size:clamp(2.9rem,14vw,5.6rem);
  letter-spacing:-.01em;
  line-height:1.05;
  translate:0 110%;
  opacity:0;
  will-change:transform,opacity;
}
.word--coming > span{color:var(--red)}
.word--very   > span{color:var(--green)}
.word--soon   > span{color:var(--teal)}

/* Wide screens: the three words sit on one line, like a shop sign */
@media (min-width:720px){
  .words{flex-direction:row;gap:.32em;align-items:baseline}
  .word{margin-top:0}
  .word > span{font-size:clamp(3.4rem,7.2vw,6.2rem)}
}

/* ---------- Entrance sequence ---------- */
@keyframes lampOn{
  0%{opacity:0}
  60%{opacity:1}
  75%{opacity:.7}   /* a tiny flicker, like an old street lamp */
  100%{opacity:1}
}
@keyframes logoIn{
  to{opacity:1;scale:1}
}
@keyframes lineDraw{
  to{scale:1 1}
}
@keyframes wordRise{
  to{translate:0 0;opacity:1}
}
/* Idle: the light breathes gently */
@keyframes breathe{
  0%,100%{opacity:1;scale:1}
  50%{opacity:.78;scale:1.04}
}
/* Idle: every few seconds the words do a small, quick wave */
@keyframes hop{
  0%,8%,100%{translate:0 0}
  4%{translate:0 -.09em}
}

.lamp{animation:lampOn 1.1s var(--ease-soft) var(--t-lamp) both, breathe 7s ease-in-out 2.4s infinite}
.logo{animation:logoIn 1.2s var(--ease-soft) var(--t-logo) both}
.ground{animation:lineDraw .8s var(--ease-soft) var(--t-line) both}

.word--coming > span{animation:wordRise .9s var(--ease-rise) var(--t-w1) both, hop 6s ease-in-out 3.2s infinite}
.word--very   > span{animation:wordRise .9s var(--ease-rise) var(--t-w2) both, hop 6s ease-in-out 3.35s infinite}
.word--soon   > span{animation:wordRise .9s var(--ease-rise) var(--t-w3) both, hop 6s ease-in-out 3.5s infinite}

/* ---------- Reduced motion: show everything, keep it still ---------- */
@media (prefers-reduced-motion:reduce){
  .lamp,.logo,.ground,.word > span{animation:none !important}
  .lamp{opacity:1}
  .logo{opacity:1;scale:1}
  .ground{scale:1 1}
  .word > span{translate:0 0;opacity:1}
}

/* ---------- No-JS / print fallback ---------- */
@media print{
  .lamp,.stage::before{display:none}
  .logo,.word > span{opacity:1;translate:0 0;scale:1;animation:none}
  .ground{scale:1 1;animation:none}
}