/*
  hero-animation.css
  ─────────────────────────────────────────────────────
  All animation styles for the Living Logical hero section.
  Imported by index alongside rebrand.css.

  Covers:
    - Drift layer (background floating shapes)
    - Hero content entrance (fadeUp sequence)
    - Hero composition (SVG logo animation)
    - All @keyframes used exclusively by the hero
  ─────────────────────────────────────────────────────
*/


/* ══════════════════════════════════════════════════
   DRIFT LAYER — background floating shapes
══════════════════════════════════════════════════ */

.drift-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.drift-shape {
  position: absolute;
  border: 1px solid #f0f0f00e;
}
.drift-shape.s1 {
  width: 320px; height: 320px;
  top: 12%; left: 54%;
  animation: drift1 18s ease-in-out infinite;
}
.drift-shape.s2 {
  width: 175px; height: 175px;
  top: 58%; left: 72%;
  border-color: #ff009912;
  animation: drift2 13s ease-in-out infinite;
}
.drift-shape.s3 {
  width: 88px; height: 88px;
  top: 18%; left: 82%;
  border-color: #f0f0f008;
  animation: drift3 20s ease-in-out infinite;
}
.drift-shape.s4 {
  width: 230px; height: 230px;
  top: 62%; left: 4%;
  border-color: #f0f0f005;
  animation: drift4 15s ease-in-out infinite;
}

@keyframes drift1 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  33%      { transform: translate(22px,-28px) rotate(6deg); }
  66%      { transform: translate(-14px,18px) rotate(-4deg); }
}
@keyframes drift2 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50%      { transform: translate(-28px,-18px) rotate(-10deg); }
}
@keyframes drift3 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  40%      { transform: translate(18px,28px) rotate(14deg); }
  80%      { transform: translate(-10px,-14px) rotate(-7deg); }
}
@keyframes drift4 {
  0%,100% { transform: translate(0,0) rotate(0deg); }
  50%      { transform: translate(18px,-22px) rotate(5deg); }
}


/* ══════════════════════════════════════════════════
   HERO CONTENT — entrance sequence
══════════════════════════════════════════════════ */

.hero-eyebrow {
  opacity: 0;
  animation: fadeUp 0.8s ease 0.2s forwards;
}
.hero-headline {
  opacity: 0;
  animation: fadeUp 0.8s ease 0.4s forwards;
}
.hero-subline {
  opacity: 0;
  animation: fadeUp 0.8s ease 0.6s forwards;
}
.hero-scroll {
  opacity: 0;
  animation: fadeUp 0.8s ease 1s forwards;
}


/* ══════════════════════════════════════════════════
   HERO COMPOSITION — SVG logo animation
   V2 stroke order:
     Dot pops at peak
     Left arm: foot → peak (climbs up)
     Right arm: peak → foot (descends)
     Ceiling: L → R
     [pause]
     Top serif
     Stem: top → bottom
     Bottom serif
     Lintel: fade in
     L1 vert, L1 horiz
     L2 vert, L2 horiz
   ──────────────────────────────────────────────────
   Easing:
     --pen:    cubic-bezier(0.25, 0.0, 0.0, 1.0)  stroke flow
     --spring: cubic-bezier(0.34, 1.4,  0.64, 1.0) dot tap
     --ease:   cubic-bezier(0.40, 0.0,  0.2,  1.0) fades
   ──────────────────────────────────────────────────
   Timings:
     peak dot         0.28s  0.30s
     left arm up      0.50s  0.48s
     right arm dn     0.88s  0.48s
     ceiling          1.28s  0.36s   ← A completes, pause
     serif top        2.00s  0.22s
     chimney stem     2.16s  0.62s
     serif bot        2.70s  0.22s
     lintel           3.10s  0.46s
     L1 vert          3.50s  0.34s
     L1 horiz         3.80s  0.19s
     L2 vert          3.92s  0.26s
     L2 horiz         4.12s  0.24s
     wordmark         4.36s  0.52s
══════════════════════════════════════════════════ */

.hero-composition {
  position: relative;
  z-index: 2;
  opacity: 0;
  animation: fadeIn 1.4s ease 0.7s forwards;
}
.hero-composition svg {
  width: 100%;
  height: auto;
}

/* Grid lines — fade in softly behind the mark */
.h-grid {
  opacity: 0;
  animation: herofadein 0.6s ease 0.1s forwards;
}

/* Dot — confident spring tap */
.h-peak-dot {
  opacity: 0;
  transform: scale(0);
  transform-origin: 50px 14px;
  animation: heropopin 0.30s cubic-bezier(0.34, 1.4, 0.64, 1) 0.28s forwards;
}

/* Left arm: foot → peak (x1=8,y1=56 → x2=50,y2=14) */
.h-roof-left {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: herodraw 0.48s cubic-bezier(0.25, 0.0, 0.0, 1.0) 0.50s forwards;
}

/* Right arm: peak → foot (x1=50,y1=14 → x2=92,y2=56) */
.h-roof-right {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: herodraw 0.48s cubic-bezier(0.25, 0.0, 0.0, 1.0) 0.88s forwards;
}

/* Ceiling: left → right */
.h-ceiling {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: herodraw 0.36s cubic-bezier(0.25, 0.0, 0.0, 1.0) 1.28s forwards;
}

/* I — top serif, stem, bottom serif */
.h-serif-top {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: herodraw 0.22s cubic-bezier(0.25, 0.0, 0.0, 1.0) 2.00s forwards;
}
.h-stem {
  stroke-dasharray: 88;
  stroke-dashoffset: 88;
  animation: herodraw 0.62s cubic-bezier(0.25, 0.0, 0.0, 1.0) 2.16s forwards;
}
.h-serif-bot {
  stroke-dasharray: 10;
  stroke-dashoffset: 10;
  animation: herodraw 0.22s cubic-bezier(0.25, 0.0, 0.0, 1.0) 2.70s forwards;
}

/* Lintel — breathes in */
.h-lintel {
  opacity: 0;
  animation: herofadein 0.46s cubic-bezier(0.40, 0.0, 0.2, 1.0) 3.10s forwards;
}

/* L1 */
.h-l1-vert {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: herodraw 0.34s cubic-bezier(0.25, 0.0, 0.0, 1.0) 3.50s forwards;
}
.h-l1-horiz {
  stroke-dasharray: 13;
  stroke-dashoffset: 13;
  animation: herodraw 0.19s cubic-bezier(0.25, 0.0, 0.0, 1.0) 3.80s forwards;
}

/* L2 */
.h-l2-vert {
  stroke-dasharray: 26;
  stroke-dashoffset: 26;
  animation: herodraw 0.26s cubic-bezier(0.25, 0.0, 0.0, 1.0) 3.92s forwards;
}
.h-l2-horiz {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: herodraw 0.24s cubic-bezier(0.25, 0.0, 0.0, 1.0) 4.12s forwards;
}


/* ══════════════════════════════════════════════════
   KEYFRAMES — hero exclusive
══════════════════════════════════════════════════ */

@keyframes heropopin {
  0%   { opacity: 0; transform: scale(0); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes herodraw {
  to { stroke-dashoffset: 0; }
}
@keyframes herofadein {
  to { opacity: 1; }
}