/* ==========================================================================
   CONTACT PAGE — PAGE-LEVEL MOTION
   Activated by initContactPageMotion() in script.js. Without JS the page
   renders as before. Transform/opacity only to keep scrolling smooth.
   ========================================================================== */

:root { --cp-ease: cubic-bezier(0.16, 1, 0.3, 1); --cp-red: #D01722; }

/* ---------- 1. Hero ---------- */
.cp-hero { position: relative; overflow: hidden; isolation: isolate; }
.cp-hero > div { position: relative; z-index: 1; }

/* Slow drifting crimson glow behind the headline */
.cp-hero::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -35%;
  right: -12%;
  width: min(70vw, 900px);
  aspect-ratio: 1;
  background: radial-gradient(circle at center, rgba(208, 23, 34, 0.26) 0%, rgba(208, 23, 34, 0) 62%);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.4s ease 0.3s;
}
.cp-hero.is-in::before {
  opacity: 1;
  animation: cpGlowDrift 18s ease-in-out infinite alternate;
}
@keyframes cpGlowDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-14%, 10%, 0) scale(1.12); }
  100% { transform: translate3d(-28%, -4%, 0) scale(0.96); }
}

/* Eyebrow: red dash draws in, then text slides in */
.cp-hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.cp-hero-eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--cp-red);
  transform: scaleX(0);
  transform-origin: left center;
}
.cp-hero:not(.is-in) .cp-hero-eyebrow { opacity: 0; }
.cp-hero.is-in .cp-hero-eyebrow { animation: cpFadeRight 0.7s var(--cp-ease) 0.05s backwards; }
.cp-hero.is-in .cp-hero-eyebrow::before { animation: cpDraw 0.6s var(--cp-ease) 0.15s forwards; }

/* Headline: masked word-by-word rise */
.cp-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.08em 0.03em 0.12em;
  margin: -0.08em -0.03em -0.12em;
}
.cp-word-inner { display: inline-block; will-change: transform; }
.cp-hero:not(.is-in) .cp-word-inner { transform: translate3d(0, 115%, 0); }
.cp-hero.is-in .cp-word-inner {
  animation: cpWordRise 0.9s var(--cp-ease) backwards;
  animation-delay: calc(var(--cp-w, 0) * 70ms + 180ms);
}
@keyframes cpWordRise {
  from { transform: translate3d(0, 115%, 0) rotate(4deg); }
  to   { transform: translate3d(0, 0, 0) rotate(0); }
}

.cp-hero:not(.is-in) .cp-hero-sub { opacity: 0; }
.cp-hero.is-in .cp-hero-sub { animation: cpRise 0.9s var(--cp-ease) var(--cp-sub-delay, 0.6s) backwards; }

/* ---------- 2. Panels ---------- */
.cp-panel { position: relative; overflow: hidden; isolation: isolate; }
.cp-panel > *:not(.cp-spot) { position: relative; z-index: 1; }

/* Red rule draws across the top of each panel */
.cp-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 2;
  background: linear-gradient(90deg, var(--cp-red), rgba(208, 23, 34, 0.15));
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}
.cp-panel:not(.is-in) { opacity: 0; }
.cp-panel.is-in {
  animation: cpRise 0.9s var(--cp-ease) backwards;
  animation-delay: calc(var(--cp-d, 0) * 140ms);
}
.cp-panel.is-in::before {
  animation: cpDraw 1s var(--cp-ease) forwards;
  animation-delay: calc(var(--cp-d, 0) * 140ms + 250ms);
}

/* Cursor-following spotlight (desktop pointer only) */
.cp-spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 420px;
  height: 420px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(208, 23, 34, 0.16) 0%, rgba(208, 23, 34, 0) 65%);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-9999px, -9999px, 0);
  transition: opacity 0.4s ease;
  will-change: transform, opacity;
}
.cp-panel.is-lit .cp-spot { opacity: 1; }

/* Section eyebrows inside panels: red dash */
.cp-eyebrow { display: flex; align-items: center; gap: 10px; }
.cp-eyebrow::before {
  content: '';
  width: 18px;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--cp-ease) 0.35s;
}
.cp-panel.is-in .cp-eyebrow::before { transform: scaleX(1); }

/* Staggered children (email rows, merch link, social tiles) */
.cp-panel:not(.is-in) .cp-stagger { opacity: 0; }
.cp-panel.is-in .cp-stagger {
  animation: cpRise 0.75s var(--cp-ease) backwards;
  animation-delay: calc(var(--cp-i, 0) * 70ms + 260ms);
}

/* ---------- 3. Direct email rows ---------- */
.cp-mail-row > a { transition: transform 0.4s var(--cp-ease), color 0.3s ease; }
.cp-mail-row > .eyebrow { transition: color 0.3s ease; }
@media (hover: hover) {
  .cp-mail-row:hover > a { transform: translate3d(8px, 0, 0); color: var(--cp-red); }
  .cp-mail-row:hover > .eyebrow { color: var(--cp-red); }
}

/* ---------- 4. Social tiles: fill sweep + arrow launch ---------- */
#contact-social-grid a {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.3s ease, transform 0.35s var(--cp-ease), box-shadow 0.35s var(--cp-ease);
}
#contact-social-grid a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--cp-red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s var(--cp-ease);
}
#contact-social-grid a > span:first-child { transition: transform 0.4s var(--cp-ease), color 0.3s ease; }
#contact-social-grid a::after { transition: transform 0.4s var(--cp-ease), color 0.3s ease; }

@media (hover: hover) {
  #contact-social-grid a:hover {
    background: #111113;
    border-color: var(--cp-red);
    transform: translate3d(0, -3px, 0);
    box-shadow: 0 14px 28px -14px rgba(208, 23, 34, 0.7);
  }
  #contact-social-grid a:hover::before { transform: scaleX(1); }
  #contact-social-grid a:hover > span:first-child { transform: scale(1.18) rotate(-6deg); }
  #contact-social-grid a:hover::after { transform: translate3d(3px, -3px, 0); }
}
#contact-social-grid a:active { transform: scale(0.97); }

/* ---------- Shared keyframes ---------- */
@keyframes cpRise {
  from { opacity: 0; transform: translate3d(0, 26px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes cpFadeRight {
  from { opacity: 0; transform: translate3d(-14px, 0, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes cpDraw {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .cp-hero *, .cp-hero::before, .cp-panel, .cp-panel *, .cp-panel::before,
  #contact-social-grid a, #contact-social-grid a::before, #contact-social-grid a::after {
    animation: none !important;
    transition: none !important;
  }
  .cp-hero:not(.is-in) .cp-word-inner { transform: none; }
  .cp-hero:not(.is-in) .cp-hero-eyebrow,
  .cp-hero:not(.is-in) .cp-hero-sub,
  .cp-panel:not(.is-in),
  .cp-panel:not(.is-in) .cp-stagger { opacity: 1; }
  .cp-panel::before, .cp-hero-eyebrow::before, .cp-eyebrow::before { transform: scaleX(1); }
  .cp-spot { display: none; }
}