/* wa-lint: skip */
/* ==== Hero Payload Generator =============================================
   Ported from inline \3c style> in docs/design/claude-design/index.html
   (lines 9–270). Drives the spinder + tagline reveal that mounts into
   #heroAnim via cd-hero-payload.js.
=========================================================================== */

/* hpl-stage:
   - In .scene--hero (the home page), the parent is a flex column with
     .hero-exits below; we flex-grow to fill remaining space.
   - As a standalone container (used elsewhere for the same payload), it
     keeps a square aspect by default through the explicit max-width and
     min-height fallbacks below.
   The internal hpl-icon-container / hpl-text-container use percentage
   positions inside .hpl-stage, so its height drives icon placement. */
.hpl-stage {
  position: relative;
  width: 100%;
  max-width: min(880px, 92vw);
  margin: 0 auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hpl-icon-container {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Begrænset af BÅDE vmin og vh så ikonet aldrig vokser ud over højden
     på korte laptop-viewports (1280×720, 1366×768) hvor stage-højden
     ellers presses og ikon kolliderer med tagline. */
  width: clamp(140px, min(24vmin, 20vh), 260px);
  height: clamp(140px, min(24vmin, 20vh), 260px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-primary, rgb(49, 79, 89));
  z-index: 10;
}
.hpl-icon-svg {
  width: 86%;
  height: 86%;
  filter: drop-shadow(0 0 30px rgba(50, 79, 89, 0.25));
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.hpl-icon-svg path[opacity] {
  fill: var(--accent) !important;
  opacity: 1 !important;
}
.hpl-icon-svg.anim-beat       { animation: hplBeat 0.3s ease-in-out; }
.hpl-icon-svg.anim-beat-fade  { animation: hplBeatFade 0.35s ease-in-out; }
.hpl-icon-svg.anim-bounce     { animation: hplBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hpl-icon-svg.anim-fade       { animation: hplFade 0.3s ease-out; }
.hpl-icon-svg.anim-flip       { animation: hplFlip 0.4s ease-out; }
.hpl-icon-svg.anim-shake      { animation: hplShake 0.4s ease-out; }
.hpl-icon-svg.anim-spin       { animation: hplSpin 0.4s ease-out; }
.hpl-icon-svg.anim-spin-reverse { animation: hplSpinReverse 0.4s ease-out; }
.hpl-icon-svg.anim-spin-pulse { animation: hplSpinPulse 0.5s ease-in-out; }
.hpl-icon-svg.hpl-final-bounce { animation: hplFinalBounce 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hpl-icon-svg.hpl-disappear   { opacity: 0; transition: opacity 0.05s ease-out; }

@keyframes hplBeat       { 0% { transform: scale(1); } 30% { transform: scale(1.25); } 100% { transform: scale(1); } }
@keyframes hplBeatFade   { 0% { transform: scale(1); opacity: .3; } 30% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes hplBounce     { 0% { transform: translateY(30px) scale(.9); opacity: .4; } 50% { transform: translateY(-10px) scale(1.05); opacity: 1; } 70% { transform: translateY(4px); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes hplFade       { 0% { opacity: 0; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hplFlip       { 0% { transform: perspective(400px) rotateY(90deg); opacity: .4; } 60% { transform: perspective(400px) rotateY(-10deg); opacity: 1; } 100% { transform: perspective(400px) rotateY(0); opacity: 1; } }
@keyframes hplShake      { 0% { transform: translateX(-15px); opacity: .5; } 25% { transform: translateX(12px); opacity: 1; } 50% { transform: translateX(-8px); } 75% { transform: translateX(4px); } 100% { transform: translateX(0); opacity: 1; } }
@keyframes hplSpin       { 0% { transform: rotate(0); opacity: .4; } 100% { transform: rotate(360deg); opacity: 1; } }
@keyframes hplSpinReverse{ 0% { transform: rotate(0); opacity: .4; } 100% { transform: rotate(-360deg); opacity: 1; } }
@keyframes hplSpinPulse  { 0% { transform: rotate(0) scale(.8); opacity: .3; } 50% { transform: rotate(180deg) scale(1.1); opacity: 1; } 100% { transform: rotate(360deg) scale(1); opacity: 1; } }
@keyframes hplFinalBounce{ 0% { transform: scale(.3) rotate(-15deg); opacity: 1; } 35% { transform: scale(1.2) rotate(3deg); opacity: 1; } 70% { transform: scale(.95) rotate(-1deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }

.hpl-pulse-ring {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  border: 2px solid rgba(50, 79, 89, 0.15);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9;
  opacity: 0;
}
.hpl-pulse-ring.final { border-color: rgba(184, 90, 58, 0.5); }
.hpl-pulse-ring.animating { animation: hplPulse 1.2s ease-out forwards; }
.hpl-pulse-ring.final.animating { animation: hplPulseFinal 1.2s ease-out forwards; }
@keyframes hplPulse      { 0% { transform: translate(-50%, -50%) scale(.8); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } }
@keyframes hplPulseFinal { 0% { transform: translate(-50%, -50%) scale(.8); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; } }

.hpl-speeddots {
  position: absolute;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
  transition: opacity 0.3s ease;
}
.hpl-speeddots.hidden { opacity: 0; }
.hpl-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(50, 79, 89, 0.2);
  transition: all 0.2s ease;
}
.hpl-dot.active {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(184, 90, 58, 0.55);
}

.hpl-burst-particle {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 11;
}
.hpl-burst-particle.animating { animation: hplBurst 0.8s ease-out forwards; }
@keyframes hplBurst { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); } }

.hpl-text-container {
  position: absolute;
  bottom: 18%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 11;
  /* Bredt nok til at de længste taglines (~30 tegn) holder på 1 linie i light
     display-vægt på desktop. Mobil er stadig 92vw og må gerne wrappe. */
  width: min(900px, 92vw);
}
.hpl-tagline {
  opacity: 0;
  transform: translateY(40px);
}
/* Slide-up snappet til 0.4s + en kortere translateY så hele hero passer
   ind i ~1.5s ende-til-ende. Spin er komprimeret til ~985ms, så taglinen
   skal afsløres hurtigt efter chrome-reveal (sker omkring 1.1s). */
.hpl-tagline.reveal { animation: hplSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.hpl-tagline-line1 {
  /* min(vw, vh): på korte viewports (laptop 720h) skalerer font NED med
     højden så headline ikke overskrider stage og kolliderer med icon. */
  font-size: clamp(24px, min(4vw, 5.5vh), 44px);
  font-weight: var(--fw-light);
  color: var(--brand-primary, rgb(49, 79, 89));
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
}
.hpl-tagline-line2 {
  font-size: clamp(16px, min(2.6vw, 3.4vh), 28px);
  font-weight: var(--fw-bold);
  color: var(--accent);
  margin-top: 16px;
  text-wrap: balance;
  position: relative;
}
.hpl-tagline-line2::before {
  content: "";
  display: block;
  width: 60px;
  height: 2px;
  background: var(--primary, var(--brand-primary, rgb(49, 79, 89)));
  margin: 0 auto 12px;
  border-radius: 2px;
}

@keyframes hplSlideUp { 0% { opacity: 0; transform: translateY(40px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes hplGrow    { 0% { width: 0; } 100% { width: 100%; } }

/* Dark theme — [data-theme="dark"] er sat af tema-toggle. De hardkodede
   var(--brand-primary, rgb(49, 79, 89)) i ikon-container, divider, pulse-ring og tagline-line1 brød
   før mod mørk surface. Vi mapper dem til text/border-tokens. */
[data-theme="dark"] .hpl-tagline-line1 { color: var(--text, rgb(232, 238, 240)); }
[data-theme="dark"] .hpl-icon-container { color: var(--text, rgb(232, 238, 240)); }
[data-theme="dark"] .hpl-icon-svg { filter: drop-shadow(0 0 30px rgba(127, 168, 182, 0.25)); }
[data-theme="dark"] .hpl-tagline-line2::before { background: var(--text, rgb(232, 238, 240)); }
[data-theme="dark"] .hpl-pulse-ring { border-color: rgba(127, 168, 182, 0.25); }
[data-theme="dark"] .hpl-dot { background: rgba(208, 220, 228, 0.25); }
/* Active dot MUST override the dark-mode base — bruger var(--accent) så
   farven matcher den orange accent og er synligt forskellig fra den
   inaktive prik. Uden denne regel havde dark-mode-prikkerne ingen visuel
   progress-indikator (alle prikker samme rgba(208,220,228,0.5)). */
[data-theme="dark"] .hpl-dot.active {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(184, 90, 58, 0.6);
}

@media (max-width: 600px) {
  .hpl-icon-container { top: 36%; }
}

/* ─── Reduced motion: skip the whole spinder + reveal choreography ───────── */
@media (prefers-reduced-motion: reduce) {
  .hpl-icon-svg,
  .hpl-icon-svg.anim-beat,
  .hpl-icon-svg.anim-beat-fade,
  .hpl-icon-svg.anim-bounce,
  .hpl-icon-svg.anim-fade,
  .hpl-icon-svg.anim-flip,
  .hpl-icon-svg.anim-shake,
  .hpl-icon-svg.anim-spin,
  .hpl-icon-svg.anim-spin-reverse,
  .hpl-icon-svg.anim-spin-pulse,
  .hpl-icon-svg.hpl-final-bounce {
    animation: none !important;
    transition: none !important;
  }
  .hpl-pulse-ring,
  .hpl-pulse-ring.animating,
  .hpl-pulse-ring.final.animating {
    animation: none !important;
    opacity: 0;
  }
  .hpl-burst-particle,
  .hpl-burst-particle.animating { animation: none !important; }
  /* Reveal taglines instantly so layout stadig giver mening */
  .hpl-tagline {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}