/* site.css — finalized one-pager (Direction B · dusk immersion)
   real responsive page. single column, everything stacked, led by a
   contained crop of the live photo. */

.site {
  min-height: 100%; color: var(--ink);
  background: linear-gradient(168deg, #CDCED8 0%, #D0C9CE 32%, #E1C3BD 64%, #F2C2A2 100%);
  background-attachment: fixed;
}
.site .meta { color: var(--ink-mute); }
.site .sep { color: var(--ink-mute); }
.site-wrap { max-width: 920px; margin: 0 auto; padding: 0 40px; }

/* slim top */
.site-top {
  display: flex; align-items: center; justify-content: flex-end;
  padding: 30px 0 0;
}

/* ---- header: a portion of the live photo, contained ---- */
.hero-photo {
  position: relative; margin-top: 56px;
  height: 400px; overflow: hidden;
  background: #C7C6CC;
  border-radius: 16px;
}
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 44%;
  animation: saendru-drift 30s var(--ease-breath) infinite alternate;
}
/* breathing warm halation — a sunset bloom resting on the horizon line */
.hero-halation {
  position: absolute; left: 50%; top: 40%; width: 64%; height: 200px;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,179,71,0.28), rgba(224,74,74,0.10) 50%, transparent 72%);
  mix-blend-mode: screen; pointer-events: none;
  animation: saendru-breath 6.5s var(--ease-breath) infinite;
}
/* deepen the lower edge so the dark treeline settles softly above the matte */
.hero-seam {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34%;
  background: linear-gradient(to top, rgba(16,18,34,0.45), transparent 78%);
  pointer-events: none;
}

/* ---- name ---- */
.name { text-align: center; margin-top: 52px; }
.name .name-mark {
  display: inline-block; width: clamp(220px, 42vw, 420px); height: auto;
}
.name .tagline { font-family: var(--font-lockup); font-size: clamp(18px, 2.3vw, 24px); letter-spacing: 0.04em; color: var(--ink-soft); margin-top: 26px; }
.name .nmeta {
  margin-top: 20px; display: flex; gap: 0; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.name .nmeta > span { white-space: nowrap; }

/* ---- sections ---- */
.cap {
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute); text-align: center;
}
.section { margin-top: 92px; }
.section .embed-col { max-width: 760px; margin: 26px auto 0; }
.section .embed-wrap { border: 1px solid var(--hairline); }
.saverow { margin-top: 22px; display: flex; justify-content: center; }

/* ---- footer: continues the page gradient ---- */
.site-footer {
  margin-top: 104px; position: relative;
  background: transparent;
  color: var(--ink);
}
.site-footer .finner { max-width: 720px; margin: 0 auto; padding: 72px 40px 60px; text-align: center; }
.site-footer .fhead { font-size: clamp(22px, 3.4vw, 30px); color: var(--ink); }
.site-footer .fsub { font-size: 13px; letter-spacing: 0.04em; color: var(--ink-mute); margin-top: 12px; }
.site-footer .flinks { margin-top: 40px; }
.site-footer .plink {
  justify-content: center; gap: 16px;
  border-top-color: var(--hairline); color: var(--ink);
}
.site-footer .plink .pnum { color: var(--ink-mute); }
.site-footer .plink .parrow { margin-left: 0; }
.site-footer .fbooking { margin-top: 40px; }
.site-footer .fmark {
  margin-top: 52px; display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.site-footer .fmark img { width: 150px; height: auto; opacity: 0.92; }
.site-footer .fcredit {
  font-size: 11px; letter-spacing: 0.08em; color: var(--ink-mute);
  white-space: nowrap;
}

/* the footer link rows: cap width so centered rows read as a list */
.site-footer .flinks-inner { max-width: 460px; margin: 0 auto; }

@media (max-width: 720px) {
  .site-wrap { padding: 0 22px; }
  .hero-photo { margin-top: 36px; }
  .hero-photo.hero--horizon { height: 280px; }
  .hero-photo.hero--portal { height: 320px; }
  .hero-photo.hero--halo { height: 300px; }
  .hero-photo.hero--everever { height: 180px; }
  .hero-type { height: 120px; margin-top: 40px; }
  .section { margin-top: 64px; }
  .name { margin-top: 36px; }
  .site-footer .finner { padding: 56px 22px 48px; }
  .site-footer .flinks-inner { max-width: 100%; }
}

/* ============================================================
   HEADER TREATMENTS
   ============================================================ */
.hero--horizon { height: 400px; }
.hero--portal  { height: 468px; }
.hero--halo    { height: 430px; }

/* ever ever: the pastel paint blob, keyed off its grey field so it floats */
.hero--everever { height: 460px; background: transparent; }
.hero--everever img { object-fit: contain; animation: saendru-blobfloat 26s var(--ease-breath) infinite alternate; }
.hero--everever .hero-seam,
.hero--everever .hero-halation { display: none; }
@keyframes saendru-blobfloat {
  0%   { transform: translateY(0) scale(1) rotate(0deg); }
  50%  { transform: translateY(-1.4%) scale(1.022) rotate(0.7deg); }
  100% { transform: translateY(-0.5%) scale(1.04) rotate(-0.6deg); }
}

/* minimal: no photo — a breathing sunset bloom in the dusk gradient */
.hero-type {
  position: relative; margin-top: 84px; height: 168px;
  display: flex; align-items: center; justify-content: center;
}
.hero-type-glow {
  width: min(560px, 78%); height: 200px; border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(225,152,147,0.34), rgba(170,190,208,0.18) 48%, transparent 72%);
  filter: blur(8px); mix-blend-mode: multiply; pointer-events: none;
}
.name--minimal { margin-top: 24px; }
.name--minimal .name-mark { width: clamp(260px, 52vw, 520px); }

/* ============================================================
   MOTION
   ============================================================ */

/* richer entrance: translate-only so a frozen/print/reduced frame is never blank */
.motion-full .rise { animation-duration: 0.72s; }

/* scroll reveal — JS adds .reveal then .reveal-in (full motion only).
   transform-only: a frozen frame shows content (just offset), never invisible. */
.reveal { transform: translateY(26px); }
.reveal-in {
  transform: translateY(0);
  transition: transform 0.95s var(--ease-out-soft);
}

/* ambient: a slow pastel bloom drifting across the whole page */
.site::before {
  content: ""; position: fixed; inset: -20% -10% auto -10%;
  height: 120vh; pointer-events: none; z-index: 0;
  background: radial-gradient(58% 40% at 72% 16%, rgba(225,152,147,0.16), transparent 62%),
              radial-gradient(52% 38% at 20% 84%, rgba(160,180,210,0.18), transparent 64%);
  mix-blend-mode: multiply; opacity: 0;
}
.motion-full .site::before,
.motion-subtle .site::before {
  opacity: 1;
  animation: saendru-ambient 22s var(--ease-breath) infinite alternate;
}
@keyframes saendru-ambient {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
}
.site-wrap, .site-footer { position: relative; z-index: 1; }

/* subtle: keep ambient drift + hero breath, drop the entrance fade weight */
.motion-subtle .hero-photo img { animation-duration: 44s; }

/* off: no motion anywhere */
.motion-off .rise { animation: none; }
.motion-off .hero-photo img,
.motion-off .hero-halation,
.motion-off .hero-type-glow,
.motion-off .site::before { animation: none; }

/* parallax: hero drifts as the page scrolls (JS sets --py); composes with the
   blob's own float on the inner <img> */
.parallax { transform: translateY(var(--py, 0px)); will-change: transform; }

/* footer rows reveal in a gentle stagger (transform-only, frozen-safe) */
.site-footer .plink.reveal { transform: translateY(20px); }

@media (prefers-reduced-motion: reduce) {
  .reveal { transform: none; }
  .parallax { transform: none !important; }
  .site::before { animation: none; }
}