/* ============================================================
   Villagrán Creative Consulting — teaser
   The brand dot bounces the wordmark to life.
   Extends tokens, fonts, and reset from styles.css
   ============================================================ */

.teaser-body{background:var(--ink);}

.teaser{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--ink);
  color:var(--ivory);
}

/* ---------- Atmosphere: glow + grain ---------- */
.teaser__atmosphere{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(110% 80% at 50% 44%, rgba(194,104,60,.14), transparent 62%);
}
.teaser__atmosphere::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  opacity:.045;
  mix-blend-mode:overlay;
}

/* ---------- Stage ---------- */
.teaser__stage{
  position:relative;z-index:1;flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:48px 24px 0;
}

.wordmark{
  width:min(88vw,900px);height:auto;display:block;
  overflow:visible;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.letters path{fill:var(--ivory);}
.wl,.wl-in{will-change:transform;}
#dotTrack{will-change:transform;}
.dot{
  fill:var(--amber);
  transform-box:fill-box;
  transform-origin:50% 100%;
}

/* Pre-JS state: letters wait below the baseline mask, dot waits offstage.
   The runtime animates both; without JS the logo simply shows complete. */
html.js .wl-in{transform:translateY(130px);}
html.js body.is-settled .wl-in{transform:translateY(0);}
html.js body:not(.is-settled) #dotTrack{transform:translate(-833px,-170px);}

/* Idle: once settled, a very slow breathing zoom keeps the mark alive
   without competing with the entrance or the pointer-spring letters.
   Applied to a plain wrapper div, never to the <svg> itself — a CSS
   transform on an SVG that owns an internal <mask> can corrupt the
   mask's coordinate space in some engines. */
.wordmark-zoom{display:flex;justify-content:center;width:100%;}
@media (prefers-reduced-motion:no-preference){
  body.is-settled .wordmark-zoom{animation:logo-breathe 18s ease-in-out infinite;}
}
@keyframes logo-breathe{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.03);}
}

/* ---------- Copy ---------- */
.tagline{
  margin-top:.3rem;
  font-size:.82rem;font-weight:600;
  letter-spacing:.34em;text-indent:.34em;text-transform:uppercase;
  color:rgba(245,241,234,.48);
}
.soon{
  margin-top:1.1rem;
  font-family:var(--serif);font-style:italic;
  font-size:1.1rem;letter-spacing:.04em;
  color:var(--amber);
}

/* ---------- Contact ---------- */
.teaser__contact{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  font-size:.95rem;
  padding:0 24px 44px;
}
.teaser__contact-link{
  color:rgba(245,241,234,.66);font-weight:500;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
a.teaser__contact-link:hover{color:var(--ivory);border-color:var(--amber);}
.teaser__contact-link--static{cursor:default;}
.teaser__sep{color:rgba(245,241,234,.22);}

/* ---------- Deferred reveal (tagline, soon, contact) ---------- */
.reveal-late{transition:opacity 1s var(--ease),transform 1s var(--ease);}
.soon{transition-delay:.12s;}
.teaser__contact{transition-delay:.24s;}
html.js body:not(.is-settled) .reveal-late{opacity:0;transform:translateY(10px);}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .teaser__stage{padding:40px 18px 0;}
  .wordmark{width:min(92vw,900px);}
  .teaser__contact{gap:10px 18px;padding-bottom:36px;}
}
@media (max-width:480px){
  .teaser__contact{flex-direction:column;gap:10px;}
  .teaser__sep{display:none;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .reveal-late{transition:none;}
  html.js .wl-in{transform:none;}
  html.js body:not(.is-settled) #dotTrack{transform:none;}
}