:root{ --motion:1; }

/* ===== Hero: Breath ===== */
.hero{
  --hero-grad: radial-gradient(120% 90% at 50% 38%, #FAF7F0 0%, var(--vellum) 46%, var(--vellum-deep) 100%);
  --hero-fg: var(--ink);
  --hero-accent: var(--vermilion);
  --hero-ring: var(--gold);
  --hero-glow: 176,141,63;
  --hero-muted: var(--ink);
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; padding:90px var(--pad) 60px;
  background: var(--hero-grad);
  transition:background .8s ease;
}
/* breathing glow that pulses behind the name */
.hero::before{
  content:''; position:absolute; top:38%; left:50%;
  width:min(78vw,720px); aspect-ratio:1; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(var(--hero-glow),.20) 0%, rgba(var(--hero-glow),0) 62%);
  border-radius:50%; z-index:0;
  animation:glow var(--breath-dur) cubic-bezier(.4,0,.4,1) infinite alternate;
}
@keyframes glow{ from{ transform:translate(-50%,-50%) scale(calc(1 - .22*var(--motion,1))); opacity:.5; } to{ transform:translate(-50%,-50%) scale(calc(1 + .18*var(--motion,1))); opacity:.95; } }

.breath-stage{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  animation:breathe var(--breath-dur) cubic-bezier(.4,0,.4,1) infinite alternate;
}
@keyframes breathe{
  from{ transform:translateY(calc(8px*var(--motion,1))) scale(calc(1 - .015*var(--motion,1))); }
  to{ transform:translateY(calc(-10px*var(--motion,1))) scale(calc(1 + .018*var(--motion,1))); }
}

/* concentric breath-guide rings */
.ring{
  position:absolute; top:50%; left:50%; border-radius:50%;
  border:1px solid var(--hero-ring); z-index:0; pointer-events:none;
  transform:translate(-50%,-50%);
  animation:ring var(--breath-dur) cubic-bezier(.4,0,.4,1) infinite alternate;
}
.ring.a{ width:min(60vw,440px); aspect-ratio:1; opacity:.32; }
.ring.b{ width:min(78vw,580px); aspect-ratio:1; opacity:.16; animation-delay:.15s; }
@keyframes ring{
  from{ transform:translate(-50%,-50%) scale(calc(1 - .18*var(--motion,1))); opacity:.05; }
  to{ transform:translate(-50%,-50%) scale(calc(1 + .06*var(--motion,1))); }
}

.name-group{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:4px; }
.kicker.hero-k{ margin-bottom:26px; opacity:.9; }

.my-name{
  font-family:var(--pd); font-weight:700;
  font-size:clamp(54px,11vw,150px); line-height:1.04; color:var(--hero-fg);
  letter-spacing:.005em; white-space:nowrap;
}
/* responsive name split — shows break on small screens */
.my-br{ display:none; }
@media (max-width:540px){
  .my-name{ font-size:clamp(44px,13vw,62px); line-height:1.10; white-space:normal; }
  .my-br{ display:block; }
}
.en-name{
  font-family:var(--eg); font-style:italic;
  font-size:clamp(22px,3.4vw,40px); color:var(--hero-accent);
  margin-top:14px; letter-spacing:.02em;
}
.en-sub{
  font-family:var(--in); font-size:clamp(14px,1.5vw,17px);
  max-width:42ch; margin-top:22px; opacity:.82; line-height:1.7;
}
.en-sub .italic{ font-family:var(--eg); }

/* hero journey line — from Burma, to Urbana */
.journey{
  display:inline-flex; align-items:center; justify-content:center;
  gap:clamp(.42em,1.3vw,.72em); flex-wrap:wrap;
  max-width:none; opacity:1; margin-top:24px;
}
.journey .conn{
  font-family:var(--mo); font-size:clamp(10px,1vw,12px);
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  transform:translateY(-1px);
}
.journey .place{
  font-family:var(--eg); font-style:italic;
  font-size:clamp(21px,2.7vw,32px); color:var(--hero-fg); letter-spacing:.01em;
}
.journey .dash{ width:clamp(22px,4vw,44px); height:1px; background:var(--gold); opacity:.6; }

.breath-guide{
  position:absolute; bottom:96px; left:50%; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--hero-muted);
}
.breath-guide .bg-in, .breath-guide .bg-ex{ opacity:.5; }
.breath-guide .bg-in{ animation:bgIn var(--breath-dur) cubic-bezier(.4,0,.4,1) infinite alternate; }
.breath-guide .bg-ex{ animation:bgEx var(--breath-dur) cubic-bezier(.4,0,.4,1) infinite alternate; }
@keyframes bgIn{ from{ opacity:.15; } to{ opacity:.62; } }
@keyframes bgEx{ from{ opacity:.62; } to{ opacity:.15; } }
.breath-guide .dot{
  width:8px; height:8px; border-radius:50%; background:var(--hero-accent);
  animation:dot var(--breath-dur) cubic-bezier(.4,0,.4,1) infinite alternate;
}
@keyframes dot{ from{ transform:scale(calc(1 - .45*var(--motion,1))); opacity:.4; } to{ transform:scale(calc(1 + .5*var(--motion,1))); opacity:.9; } }

.scrollcue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3;
  font-family:var(--mo); font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--hero-muted); opacity:.4;
}

.coords-tag{ position:absolute; top:calc(50% + 15px); z-index:3; }
.coords-tag.right{ right:var(--pad); transform:translateY(-50%) rotate(90deg); transform-origin:right center; }
.coords-tag.left{ left:var(--pad); transform:translateY(-50%) rotate(-90deg); transform-origin:left center; }
@media (max-width:760px){ .coords-tag{ display:none; } .breath-guide{ bottom:72px; } }

.hero .coords{ color:var(--hero-muted); }