/* ============================================================
   HOME — HERO (Pixy-inspired)
   Only the hero section was redesigned; everything else on the
   homepage was reverted to the original build. Namespaced with
   "ph-" to avoid collisions with the rest of the site.
   Movement is CSS-first: floating shapes use
   @supports (animation-timeline) progressive enhancement (same
   pattern as the PREMIUM UX LAYER in styles.css) so nothing here
   depends on GSAP/ScrollSmoother/Swiper.
============================================================ */

/* ---------- shared bits ---------- */
.ph-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--accent-ink); margin-bottom: 22px;
}
.ph-eyebrow i { font-size: 15px; }

.ph-shape { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
.ph-shape img { display: block; width: 100%; height: auto; }

@supports (animation-timeline: scroll()) {
  .ph-float {
    animation: phFloatDrift linear both;
    animation-timeline: scroll(root);
    animation-range: 0 100vh;
  }
  @keyframes phFloatDrift {
    from { transform: translateY(0) rotate(0deg); }
    to   { transform: translateY(-60px) rotate(10deg); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .ph-float { animation: none !important; }
}

/* ============================================================
   HERO
============================================================ */
.ph-hero {
  position: relative;
  padding: 168px 0 96px;
  overflow: clip;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.ph-hero .container { position: relative; z-index: 2; }

.ph-hero-shapes { position: absolute; inset: 0; z-index: 0; }
.ph-shape--1 { top: 14%; left: 6%; width: 78px; opacity: 0.9; }
.ph-shape--2 { top: 62%; left: 3%; width: 54px; opacity: 0.7; }
.ph-shape--3 { top: 10%; right: 6%; width: 96px; opacity: 0.85; }
.ph-shape--4 { top: 58%; right: 4%; width: 60px; opacity: 0.7; }
/* Scaled down (not hidden) on small phones so they read as corner
   accents rather than crowding the centered heading text. */
@media (max-width: 480px) {
  .ph-shape--1 { width: 48px; }
  .ph-shape--2 { width: 36px; }
  .ph-shape--3 { width: 58px; }
  .ph-shape--4 { width: 40px; }
}

.ph-word-frame { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ph-word-shape { position: absolute; width: 46px; top: -14px; right: -50px; opacity: 0.85; }
.ph-word-shape img { display: block; width: 100%; height: auto; }
@media (max-width: 640px) { .ph-word-shape { display: none; } }

.ph-hero-display {
  font-size: clamp(38px, 7.4vw, 96px);
  line-height: 1.02;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.ph-hero-sub { font-size: clamp(15px, 1.6vw, 18px); color: var(--text-2); margin: 28px auto 0; max-width: 440px; }
.ph-hero-actions { margin-top: 36px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.ph-scroll-cue {
  margin-top: 72px; position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ph-scroll-cue-ring { position: relative; width: 152px; height: 152px; }
.ph-scroll-cue-ring svg { width: 100%; height: 100%; animation: phRotate 16s linear infinite; }
.ph-scroll-cue-ring text {
  font-size: 19px; letter-spacing: 2px; font-weight: 600;
  fill: var(--text-2); font-family: var(--font);
}
.ph-scroll-cue-arrow {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--accent-ink); font-size: 22px;
  animation: phBob 1.8s ease-in-out infinite;
}
@keyframes phRotate { to { transform: rotate(360deg); } }
@keyframes phBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .ph-scroll-cue-ring svg, .ph-scroll-cue-arrow { animation: none; }
}