/* ═══════════════════════════════════════════════════════
   WAYNE GOSS — DYNAMIC ENHANCEMENTS (styles-dynamic.css)
   Layered on top of styles-v30.css
   ═══════════════════════════════════════════════════════ */

/* ─── ENHANCED BODY ATMOSPHERE ─── */
body {
  background:
    radial-gradient(56vw 44vw at 88% 8%, rgba(255,69,199,.15), transparent 52%),
    radial-gradient(38vw 30vw at 8% 62%, rgba(247,240,224,.06), transparent 56%),
    radial-gradient(32vw 28vw at 64% 80%, rgba(142,13,84,.13), transparent 58%),
    linear-gradient(180deg,#1a1015 0%,#160e13 20%,#140c11 50%,#120b0f 100%);
}

/* ─── PULSING AURORA LAYERS ─── */
.aurora-layer {
  opacity: .75;
  filter: blur(52px);
  transition: opacity 1.2s ease;
}
.aurora-one {
  width: 42vw; height: 36vw;
  animation: auroraDrift1 22s ease-in-out infinite alternate;
}
.aurora-two {
  width: 36vw; height: 30vw;
  animation: auroraDrift2 28s ease-in-out infinite alternate;
}
.aurora-three {
  width: 30vw; height: 26vw;
  animation: auroraDrift3 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift1 {
  0%   { transform: translate3d(0,0,0) scale(1); opacity: .65; }
  50%  { transform: translate3d(-4vw, 6vh, 0) scale(1.12); opacity: .8; }
  100% { transform: translate3d(4vw, -4vh, 0) scale(.94); opacity: .55; }
}
@keyframes auroraDrift2 {
  0%   { transform: translate3d(0,0,0) scale(1.05); opacity: .5; }
  60%  { transform: translate3d(6vw, 8vh, 0) scale(.9); opacity: .7; }
  100% { transform: translate3d(-3vw, -2vh, 0) scale(1.1); opacity: .45; }
}
@keyframes auroraDrift3 {
  0%   { transform: translate3d(0,0,0); opacity: .6; }
  45%  { transform: translate3d(3vw, -5vh, 0) scale(1.08); opacity: .75; }
  100% { transform: translate3d(-5vw, 4vh, 0) scale(.92); opacity: .5; }
}

/* ─── HEADER — GLASSMORPHISM SHIMMER ─── */
.header {
  background: rgba(18,10,14,.72);
  transition: background .4s ease, box-shadow .4s ease;
}
.header::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,69,199,.35) 30%,
    rgba(247,240,224,.28) 50%,
    rgba(255,69,199,.35) 70%,
    transparent 100%);
  animation: headerLineShimmer 5s ease-in-out infinite;
}
@keyframes headerLineShimmer {
  0%, 100% { opacity: .5; transform: scaleX(.7); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* ─── LOGO HOVER GLOW ─── */
.logo {
  transition: color .3s ease, text-shadow .3s ease;
}
.logo:hover {
  text-shadow: 0 0 28px rgba(255,69,199,.38), 0 0 56px rgba(255,69,199,.14);
}

/* ─── HERO CINEMATIC UPGRADES ─── */
.hero {
  isolation: isolate;
}
.hero > img {
  transition: transform .1s linear;
  will-change: transform;
}
.hero-overlay {
  background:
    radial-gradient(40% 24% at 68% 58%, rgba(255,69,199,.10), transparent 72%),
    linear-gradient(180deg,
      rgba(0,0,0,.05) 0%,
      rgba(16,10,14,.08) 28%,
      rgba(18,11,15,.22) 56%,
      rgba(18,11,15,.68) 84%,
      rgba(18,11,15,.94) 100%);
}

/* ─── HERO NAME LETTER SHIMMER ─── */
.letter-shimmer {
  display: inline-block;
  transition: color .3s ease, text-shadow .3s ease;
  animation: letterFloat 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 80ms);
}
.hero-name:hover .letter-shimmer {
  text-shadow: 0 0 32px rgba(255,69,199,.5);
  color: #fff;
  animation-play-state: paused;
}
@keyframes letterFloat {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-3px); }
}

/* ─── HERO BUTTON — IRIDESCENT ─── */
.hero-signup-button--outline {
  position: relative;
  overflow: hidden;
}
.hero-signup-button--outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,.18) 40%,
    rgba(255,255,255,.06) 55%,
    transparent 100%);
  transform: translateX(-120%);
  transition: transform .5s ease;
}
.hero-signup-button--outline:hover::before {
  transform: translateX(120%);
}

/* ─── SCROLL HINT ANIMATION ─── */
.scroll-hint {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: opacity .6s ease;
  z-index: 5;
}
.scroll-hint span {
  display: block;
  width: 1px;
  height: 48px;
  background: linear-gradient(180deg, rgba(223,199,160,.72), rgba(223,199,160,0));
  animation: scrollHintPulse 2s ease-in-out infinite;
}
@keyframes scrollHintPulse {
  0%, 100% { opacity: .4; transform: scaleY(.8) translateY(-4px); }
  50% { opacity: 1; transform: scaleY(1) translateY(0); }
}

/* ─── EDITORIAL STATEMENT — MOUSE GLOW ─── */
.editorial-statement {
  --glow-x: 50%;
  --glow-y: 50%;
  transition: box-shadow .4s ease;
}
.editorial-statement::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(28% 24% at var(--glow-x) var(--glow-y),
    rgba(255,69,199,.12), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: 0;
}
.editorial-statement:hover::after {
  opacity: 1;
}

/* ─── QUOTE IMAGE PARALLAX ─── */
.quote-image-card {
  overflow: hidden;
}
.quote-image-card img {
  transform: scale(1.08) translateY(0);
  transition: transform .1s linear;
  will-change: transform;
}

/* ─── QUOTE OVERLAY FADE IN ─── */
.quote-image-overlay {
  background: linear-gradient(90deg,
    rgba(14,10,13,.78) 0%,
    rgba(14,10,13,.36) 42%,
    rgba(14,10,13,.08) 72%);
}
.quote-image-text {
  font-family: 'IM Fell French Canon', Georgia, serif;
  font-style: italic;
  opacity: 1;
}
.in-view .quote-image-text,
.quote-image-card.in-view .quote-image-text {
  opacity: 1;
}
@keyframes quoteReveal {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 1; transform: none; }
}

/* ─── STORY PANEL — INTERACTIVE GLOW ─── */
.interactive-panel {
  transition: box-shadow .4s ease, border-color .4s ease;
}
.interactive-panel:hover {
  border-color: rgba(255,69,199,.18);
  box-shadow: 0 28px 80px rgba(0,0,0,.28), 0 0 0 1px rgba(255,69,199,.08) inset;
}

/* ─── STATS — ANIMATED COUNTER GLOW ─── */
.stat {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.stat:hover {
  border-color: rgba(255,69,199,.22);
  box-shadow: 0 20px 52px rgba(0,0,0,.24), 0 0 32px rgba(255,69,199,.10);
}
.stat .num {
  position: relative;
  display: inline-block;
}
.stat .num::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,69,199,.6), transparent);
  transform: scaleX(0);
  transition: transform .4s ease;
}
.stat:hover .num::after {
  transform: scaleX(1);
}

/* ─── MEDIA TILES — CINEMATIC HOVER ─── */
.media-tile {
  transition: transform .38s cubic-bezier(.22,1,.36,1), box-shadow .38s ease;
  will-change: transform;
}
.media-tile img {
  transition: transform .5s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}
.media-tile:hover img {
  transform: scale(1.06);
}
.media-tile .label {
  transition: transform .35s ease, text-shadow .35s ease;
}
.media-tile:hover .label {
  transform: translateY(-4px);
  text-shadow: 0 0 28px rgba(255,69,199,.38);
}

/* ─── COMING SOON PANEL — LIGHT PULSE ─── */
.coming-feature {
  --mx: 70%;
  --my: 30%;
  position: relative;
}
.coming-feature::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(28% 22% at var(--mx) var(--my),
    rgba(255,69,199,.16), transparent 70%);
  transition: opacity .3s ease;
  opacity: 0;
  z-index: 0;
}
.coming-feature:hover::before {
  opacity: 1;
}

/* ─── PILL — PULSE BORDER ─── */
.pill {
  position: relative;
  animation: pillPulse 4s ease-in-out infinite;
}
@keyframes pillPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,69,199,0); }
  50% { box-shadow: 0 0 0 4px rgba(255,69,199,.08); }
}

/* ─── BUTTON SHARED SHIMMER ─── */
.button, .coming-pill {
  position: relative;
  overflow: hidden;
}
.button::after, .coming-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255,255,255,.22) 45%,
    rgba(255,255,255,.06) 60%,
    transparent 100%);
  transform: translateX(-120%);
  transition: transform .5s ease;
}
.button:hover::after, .coming-pill:hover::after {
  transform: translateX(120%);
}

/* ─── NAV LINKS — STAGGERED ENTRANCE ─── */
.nav a {
  opacity: 0;
  animation: navFadeIn .6s ease forwards;
}
.nav a:nth-child(1) { animation-delay: .15s; }
.nav a:nth-child(2) { animation-delay: .22s; }
.nav a:nth-child(3) { animation-delay: .29s; }
.nav a:nth-child(4) { animation-delay: .36s; }
@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* ─── PORTRAIT CARD — BREATHING GLOW ─── */
.breath-card {
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(255,69,199,0)); }
  50% { filter: drop-shadow(0 0 28px rgba(255,69,199,.14)); }
}

/* ─── FOOTER — SUBTLE RISE ─── */
.site-footer {
  position: relative;
}
.site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255,69,199,.28) 30%,
    rgba(247,240,224,.22) 50%,
    rgba(255,69,199,.28) 70%,
    transparent);
  animation: footerLineShimmer 8s ease-in-out infinite;
}
@keyframes footerLineShimmer {
  0%, 100% { opacity: .4; }
  50% { opacity: 1; }
}

/* ─── CONTACT SIMPLE LINKS ─── */
.contact-simple-buttons a {
  position: relative;
  overflow: hidden;
  transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.contact-simple-buttons a:hover {
  background: rgba(255,69,199,.12) !important;
  border-color: rgba(255,69,199,.32) !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,0,0,.22), 0 0 18px rgba(255,69,199,.10);
}

/* ─── REDUCED MOTION OVERRIDES ─── */
@media (prefers-reduced-motion: reduce) {
  .aurora-one, .aurora-two, .aurora-three,
  .letter-shimmer,
  .scroll-hint span,
  .pill,
  .breath-card,
  .site-footer::before,
  .header::after,
  .nav a {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .quote-image-card img {
    transform: scale(1.04) !important;
  }
}


/* ─── WEBSITE3 FIXES 115 — revert hero wordmark + editorial overlap test ─── */
.hero-name,
.hero-name .letter-shimmer,
.hero-name em {
  color: inherit;
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
}
.hero-name em {
  font-style: italic;
}
.hero-name:hover,
.hero-name:hover em,
.hero-name:hover .letter-shimmer {
  color: inherit !important;
  text-shadow: none !important;
}

body[data-page="home"] .section-editorial-statement {
  position: relative;
  z-index: 5;
  margin-top: -92px;
  padding-top: 0;
}
body[data-page="home"] .section-editorial-statement::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -120px;
  height: 180px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(18,11,15,0), rgba(18,11,15,.74) 82%, rgba(18,11,15,.96) 100%);
  z-index: 0;
}
body[data-page="home"] .section-editorial-statement .wrapper {
  position: relative;
  z-index: 2;
}
body[data-page="home"] .section-editorial-statement .editorial-statement {
  box-shadow: 0 28px 80px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04);
}

@media (max-width: 960px) {
  body[data-page="home"] .section-editorial-statement {
    margin-top: -64px;
  }
  body[data-page="home"] .section-editorial-statement::before {
    top: -88px;
    height: 132px;
  }
}
@media (max-width: 640px) {
  body[data-page="home"] .section-editorial-statement {
    margin-top: -42px;
  }
  body[data-page="home"] .section-editorial-statement::before {
    top: -64px;
    height: 100px;
  }
}


/* ─── WEBSITE3 FIXES 116 — stronger editorial overlap, restore reveal, soften hero join, crop portrait ─── */
body[data-page="home"] .hero.cinematic-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 240px;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(18,11,15,0) 0%,
      rgba(18,11,15,.08) 28%,
      rgba(18,11,15,.22) 52%,
      rgba(18,11,15,.46) 74%,
      rgba(18,11,15,.78) 90%,
      rgba(18,11,15,.96) 100%);
  filter: blur(14px);
  z-index: 1;
}

body[data-page="home"] .hero.cinematic-hero > img {
  -webkit-mask-image: linear-gradient(180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 72%,
    rgba(0,0,0,.94) 82%,
    rgba(0,0,0,.66) 90%,
    rgba(0,0,0,.22) 97%,
    rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 72%,
    rgba(0,0,0,.94) 82%,
    rgba(0,0,0,.66) 90%,
    rgba(0,0,0,.22) 97%,
    rgba(0,0,0,0) 100%);
}

body[data-page="home"] .hero-overlay {
  background:
    radial-gradient(40% 24% at 68% 58%, rgba(255,69,199,.08), transparent 72%),
    linear-gradient(180deg,
      rgba(0,0,0,.04) 0%,
      rgba(16,10,14,.08) 28%,
      rgba(18,11,15,.18) 56%,
      rgba(18,11,15,.58) 80%,
      rgba(18,11,15,.88) 100%);
}

body[data-page="home"] .section-editorial-statement {
  position: relative;
  z-index: 6;
  margin-top: -182px;
  padding-top: 0;
}

body[data-page="home"] .section-editorial-statement::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -190px;
  height: 260px;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(18,11,15,0) 0%,
      rgba(18,11,15,.06) 26%,
      rgba(18,11,15,.24) 50%,
      rgba(18,11,15,.56) 72%,
      rgba(18,11,15,.84) 88%,
      rgba(18,11,15,.98) 100%);
  filter: blur(18px);
  z-index: 0;
}

body[data-page="home"] .section-editorial-statement .wrapper {
  position: relative;
  z-index: 2;
}

body[data-page="home"] .section-editorial-statement .editorial-statement {
  position: relative;
  overflow: hidden;
  box-shadow: 0 28px 88px rgba(0,0,0,.34), 0 8px 26px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.04);
}

body[data-page="home"] .section-editorial-statement .editorial-statement.reveal-light {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  filter: blur(6px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}

body[data-page="home"] .section-editorial-statement .editorial-statement.reveal-light.in-view {
  opacity: 1;
  transform: none;
  filter: none;
}

body[data-page="home"] .section-editorial-statement .editorial-visual {
  margin-left: -46px !important;
  width: calc(100% + 46px) !important;
  aspect-ratio: 0.82 / 1 !important;
  align-self: stretch !important;
}

body[data-page="home"] .section-editorial-statement .editorial-visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 10% !important;
  transform: scale(1.06);
}

body[data-page="home"] .hero-name,
body[data-page="home"] .hero-name em,
body[data-page="home"] .hero-name .letter-shimmer,
body[data-page="home"] .hero-name:hover,
body[data-page="home"] .hero-name:hover em,
body[data-page="home"] .hero-name:hover .letter-shimmer {
  color: inherit !important;
  text-shadow: none !important;
  animation: none !important;
  transform: none !important;
}

body[data-page="home"] .hero-name em {
  font-style: italic !important;
}

@media (max-width: 1100px) {
  body[data-page="home"] .section-editorial-statement {
    margin-top: -136px;
  }
  body[data-page="home"] .section-editorial-statement::before {
    top: -146px;
    height: 206px;
  }
  body[data-page="home"] .section-editorial-statement .editorial-visual {
    margin-left: -24px !important;
    width: calc(100% + 24px) !important;
  }
}

@media (max-width: 820px) {
  body[data-page="home"] .hero.cinematic-hero::after {
    height: 180px;
  }
  body[data-page="home"] .section-editorial-statement {
    margin-top: -74px;
  }
  body[data-page="home"] .section-editorial-statement::before {
    top: -96px;
    height: 136px;
  }
  body[data-page="home"] .section-editorial-statement .editorial-visual {
    margin-left: 0 !important;
    width: 100% !important;
    aspect-ratio: 0.86 / 1 !important;
  }
}