/* ==========================================================================
   Interpretive Somatics — HOMEPAGE PROTOTYPE
   Isolated from the shared design system in style.css.
   Loaded only on index.html, after style.css.

   Visual thesis: GESTURE + TYPOGRAPHY + SPACE + INTERRUPTION
   Rhythm:        stillness → movement → structure → abundance → stillness
   Palette:       BONE → BONE → BONE → INK → BONE
   ========================================================================== */

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.beat{ position:relative; }

/* -------------------------------------------------------------------------
   BEAT 1 — THRESHOLD  (mark as ground / stillness / bone)
   ------------------------------------------------------------------------- */
.beat-threshold{
  position:relative;
  overflow:hidden;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-top:7rem;
  padding-bottom:clamp(3.5rem, 9vw, 7rem);
}

.beat-threshold__mark{
  position:absolute;
  top:-15vh;
  right:-9%;
  width:min(100vw, 1180px);
  aspect-ratio:1/1;
  z-index:0;
  pointer-events:none;
  transition: opacity 1.8s var(--ease), transform 1.8s var(--ease);
}
.beat-threshold__mark.reveal{ opacity:0; transform:scale(1.06); }
.beat-threshold__mark.reveal.is-visible{ opacity:1; transform:scale(1); }
.beat-threshold__mark-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:38% 58%;
  opacity:.34;
  filter:url(#hero-mark-thin);
  mix-blend-mode:multiply;
}

/*
  Desktop only: let the mark's own bottom edge bleed past the hero into
  the top of WORLD, instead of the hard clip .beat-threshold's
  overflow:hidden normally applies. Same mark, same DOM position, same
  top/right crop (clip-path keeps those at 0) — only the bottom boundary
  is relaxed, so nothing about its relationship to the header/headline or
  its scroll behavior changes, just how much of its existing bottom is
  allowed to show through.
*/
@media (min-width:761px){
  .beat-threshold{
    overflow:visible;
    clip-path:inset(0 0 -260px 0);
  }
}

.beat-threshold__field{
  position:relative;
  z-index:1;
  max-width:920px;
}
.beat-threshold__headline{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(3.6rem, 10.5vw, 9.5rem);
  line-height:.96;
  letter-spacing:-.015em;
  color:var(--ink);
  margin:0;
}
.beat-threshold__orientation{
  font-family:var(--serif);
  font-style:italic;
  font-weight:380;
  font-size:clamp(1.1rem, 1.9vw, 1.4rem);
  color:var(--ink-soft);
  max-width:34ch;
  margin-top:clamp(1.5rem, 3vw, 2.2rem);
}
.beat-threshold__action{ margin-top:clamp(2rem, 4vw, 2.8rem); }

.beat-threshold__scroll{
  position:absolute;
  z-index:1;
  bottom:2.2rem; left:var(--gutter);
  display:flex; align-items:center; gap:.7rem;
  color:var(--ink-faint);
  font-size:.7rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.beat-threshold__scroll-line{
  width:1px; height:30px;
  background:var(--ink-faint);
  position:relative; overflow:hidden;
}
.beat-threshold__scroll-line::after{
  content:"";
  position:absolute; top:-100%; left:0; width:100%; height:100%;
  background:var(--gold);
  animation:beat-dropline 2.6s var(--ease) infinite;
}
@keyframes beat-dropline{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} }

/* -------------------------------------------------------------------------
   BEAT 2 — WORLD  (cascading manifesto / movement / bone)
   ------------------------------------------------------------------------- */
.beat-world{
  padding-block:clamp(3.5rem, 8vw, 6rem);
}
.beat-world__field{
  display:flex;
  flex-direction:column;
  position:relative;
  z-index:1;
}
.beat-world__line{
  font-family:var(--serif);
  color:var(--ink);
  margin:0;
  max-width:16ch;
}
.beat-world__line--1{
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  font-weight:420;
  align-self:flex-start;
  margin-top:0;
}
.beat-world__line--2{
  font-size:clamp(1.6rem, 3.4vw, 2.6rem);
  font-style:italic;
  font-weight:380;
  color:var(--gold-deep);
  align-self:flex-end;
  text-align:right;
  margin-top:clamp(2rem, 5vw, 3rem);
}
.beat-world__line--3{
  font-size:clamp(1.9rem, 4.2vw, 3.2rem);
  font-weight:420;
  align-self:flex-start;
  margin-top:clamp(2rem, 5vw, 3rem);
  margin-left:clamp(0px, 6vw, 90px);
  max-width:18ch;
}
.beat-world__line--4{
  font-size:clamp(1.5rem, 3vw, 2.3rem);
  font-weight:480;
  letter-spacing:-.01em;
  align-self:center;
  text-align:center;
  margin-top:clamp(2rem, 5vw, 3rem);
  transform:rotate(-1.1deg);
}
.beat-world__line--5{
  font-size:clamp(2rem, 4.6vw, 3.6rem);
  font-style:italic;
  font-weight:380;
  align-self:flex-end;
  text-align:right;
  color:var(--gold-deep);
  margin-top:clamp(2rem, 5vw, 3rem);
  max-width:18ch;
}

/* -------------------------------------------------------------------------
   BEAT 3 — PATHS  (divergent alignment / structure / bone)
   ------------------------------------------------------------------------- */
.beat-paths{
  padding-block:clamp(5rem, 11vw, 8.5rem);
  background:var(--paper);
}
.beat-paths__intro{
  font-family:var(--serif);
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight:420;
  color:var(--ink);
  max-width:20ch;
}
.beat-paths__fork{
  position:relative;
  margin-top:clamp(3rem, 7vw, 5rem);
  min-height:220px;
}
.beat-paths__branch{
  position:relative;
  z-index:1;
  font-family:var(--serif);
  font-size:clamp(1.2rem, 1.8vw, 1.45rem);
  line-height:1.5;
  color:var(--ink-soft);
  max-width:32ch;
}
.beat-paths__branch--a{
  margin-left:0;
}
.beat-paths__branch--b{
  margin-left:auto;
  margin-top:clamp(2.5rem, 6vw, 4rem);
  text-align:right;
  color:var(--ink);
}
.beat-paths__link{ margin-top:clamp(2.5rem, 5vw, 3.5rem); }

/* -------------------------------------------------------------------------
   BEAT 4 — COLLECTIVE  (full-bleed field / abundance / INK — tonal inversion)
   ------------------------------------------------------------------------- */
.beat-collective{
  position:relative;
  overflow:hidden;
  background:var(--ink);
  color:var(--bone);
  padding-block:clamp(6rem, 13vw, 10rem);
}
.beat-collective__mark{
  position:absolute;
  z-index:0;
  pointer-events:none;
  bottom:-30%;
  left:-26%;
  width:min(135vw, 1500px);
  aspect-ratio:1/1;
  transition: opacity 1.8s var(--ease), transform 1.8s var(--ease);
}
.beat-collective__mark.reveal{ opacity:0; transform:scale(1.05) scaleX(-1); }
.beat-collective__mark.reveal.is-visible{ opacity:1; transform:scale(1) scaleX(-1); }
.beat-collective__mark-img{
  width:100%; height:100%;
  object-fit:cover;
  object-position:62% 32%;
  opacity:.5;
}
@media (prefers-reduced-motion: reduce){
  .beat-threshold__mark.reveal,
  .beat-collective__mark.reveal{ opacity:1; transform:none; transition:none; }
}

.beat-collective__field{ position:relative; z-index:1; }
.beat-collective__intro{
  font-family:var(--serif);
  font-weight:400;
  font-style:normal;
  font-size:clamp(1.9rem, 4vw, 3rem);
  line-height:1.25;
  color:var(--bone);
  max-width:22ch;
  margin:0;
}
.beat-collective__block{
  font-family:var(--serif);
  color:var(--gold-pale);
  line-height:1.6;
  margin:0;
}
.beat-collective__block--2{
  font-style:italic;
  font-weight:380;
  font-size:clamp(1.2rem, 2vw, 1.55rem);
  max-width:36ch;
  margin-top:clamp(3.5rem, 8vw, 6rem);
  margin-left:clamp(0px, 26vw, 320px);
}
.beat-collective__block--3{
  font-style:normal;
  font-weight:420;
  font-size:clamp(1.3rem, 2.3vw, 1.75rem);
  max-width:42ch;
  margin-top:clamp(3rem, 7vw, 5rem);
  margin-left:clamp(0px, 8vw, 90px);
}

/* -------------------------------------------------------------------------
   BEAT 5 — INVITATION  (threshold echo / stillness / bone)
   ------------------------------------------------------------------------- */
.beat-invitation{
  position:relative;
  overflow:hidden;
  padding-block:clamp(6rem, 13vw, 10rem);
}
.beat-invitation__field{
  position:relative;
  z-index:1;
  text-align:center;
  max-width:680px;
  margin-inline:auto;
}
.beat-invitation__statement{
  font-family:var(--serif);
  font-weight:420;
  font-size:clamp(2rem, 4.4vw, 3.2rem);
  color:var(--ink);
  margin:0;
}
.beat-invitation__action{ margin-top:clamp(1.8rem, 4vw, 2.4rem); }
.beat-invitation__utility{
  margin-top:clamp(2rem, 4vw, 2.8rem);
  font-size:.85rem;
  color:var(--ink-faint);
  letter-spacing:.01em;
}

/* -------------------------------------------------------------------------
   Responsive adjustments
   ------------------------------------------------------------------------- */
@media (max-width:760px){
  .beat-threshold{ justify-content:flex-start; min-height:55svh; padding-top:6.75rem; padding-bottom:1rem; }
  .beat-threshold__action{ margin-top:169px; }
  .beat-threshold__scroll{ display:none; }
  .beat-threshold__mark{ top:62px; right:-20%; width:110vw; }
  .beat-threshold__mark-img{ object-position:30% 65%; filter:url(#hero-mark-thin-mobile); opacity:.4; }

  .beat-world__line{ max-width:22ch; }
  .beat-world__line--2,
  .beat-world__line--5{ text-align:left; align-self:flex-start; }
  .beat-world__line--3{ margin-left:0; }
  .beat-world__line--4{ text-align:left; align-self:flex-start; transform:none; }

  .beat-paths__fork{ min-height:0; }
  .beat-paths__branch--b{ margin-left:0; text-align:left; margin-top:2.2rem; }

  .beat-collective__mark{ left:-45%; bottom:-18%; width:180vw; }
  .beat-collective__mark-img{ opacity:.3; }
  .beat-collective__block--2,
  .beat-collective__block--3{ margin-left:0; max-width:none; }
  .beat-collective__block--2{ margin-top:4.5rem; }
  .beat-collective__block--3{ margin-top:4rem; }
}

@media (min-width:761px){
  .beat-invitation__field{
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .beat-invitation__statement{
    width:max-content;
    max-width:90vw;
  }
  .beat-invitation__statement-break{ display:block; white-space:nowrap; }
}