/* ============================================================
   DIRECTIONAL REVEAL SYSTEM — design-principle diverse entries
   ============================================================ */
[data-dir] {
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.22,1,.36,1),
              transform 1100ms cubic-bezier(.22,1,.36,1),
              filter 900ms ease;
  will-change: opacity, transform, filter;
  filter: blur(6px);
}
[data-dir="left"]  { transform: translate3d(-70px, 18px, 0) rotate(-2deg); }
[data-dir="right"] { transform: translate3d( 70px, 18px, 0) rotate( 2deg); }
[data-dir="up"]    { transform: translate3d(0,  70px, 0) scale(.94); }
[data-dir="down"]  { transform: translate3d(0, -70px, 0) scale(.94); }
[data-dir="tl"]    { transform: translate3d(-60px,-40px, 0) rotate(-4deg); }
[data-dir="tr"]    { transform: translate3d( 60px,-40px, 0) rotate( 4deg); }
[data-dir="bl"]    { transform: translate3d(-60px, 40px, 0) rotate( 3deg); }
[data-dir="br"]    { transform: translate3d( 60px, 40px, 0) rotate(-3deg); }
[data-dir="flip"]  { transform: perspective(900px) rotateY(-35deg) translate3d(30px,0,0); }
[data-dir="zoom"]  { transform: scale(.75) translate3d(0,30px,0); }
[data-dir].in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Step card stagger underline shimmer on reveal */
.step-card { position: relative; overflow: hidden; }
.step-card::before {
  content: "";
  position: absolute; inset: auto 0 0 -100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transition: inset 1.4s cubic-bezier(.2,.9,.2,1) .2s;
  opacity: .8;
}
.step-card[data-dir].in::before { inset: auto -100% 0 100%; }

/* Course mockup breathing */
@keyframes courseBreath {
  0%,100% { transform: translateY(0) rotateX(0); }
  50%     { transform: translateY(-6px) rotateX(1deg); }
}
.course-mockup { animation: courseBreath 6s ease-in-out infinite; }

/* Ebook tilt sway */
@keyframes ebookSway {
  0%,100% { transform: rotateY(-8deg) rotateX(2deg); }
  50%     { transform: rotateY(-4deg) rotateX(-1deg); }
}
.ebook-mockup .ebook-cover { animation: ebookSway 7s ease-in-out infinite; }

/* Creator card glow sweep */
.creator-card { position: relative; overflow: hidden; }
.creator-card::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 40%, rgba(245,197,24,.18) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 1.4s cubic-bezier(.2,.9,.2,1);
  pointer-events: none;
}
.creator-card[data-dir].in::before { transform: translateX(120%); }

/* Testimonial cards floating orb */
.testimonial-card { position: relative; overflow: hidden; }
.testimonial-card::before {
  content:"";
  position:absolute; width:280px; height:280px; border-radius:50%;
  background: radial-gradient(circle, rgba(245,197,24,.12), transparent 60%);
  top:-120px; right:-120px;
  transition: transform 1.2s ease;
  pointer-events:none;
}
.testimonial-card:hover::before { transform: translate(-40px, 40px) scale(1.4); }

/* FAQ side border reveals */
.faq-item[data-dir="left"]  { border-left:  1px solid transparent; }
.faq-item[data-dir="right"] { border-right: 1px solid transparent; }
.faq-item[data-dir].in {
  border-color: rgba(245,197,24,.35);
  transition: border-color .8s ease .4s;
}

/* Perk icons spin on hover */
@keyframes perkSpin { from { transform: rotate(0);} to { transform: rotate(360deg);} }
.perk-icon { transition: transform .6s ease, color .4s ease; }
.perk:hover .perk-icon { animation: perkSpin 2.2s linear infinite; color: var(--glow); }

/* Metric cards asymmetric bounce */
@keyframes metricKickAsym {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-14px) scale(1.05) rotate(-2deg); }
  60%  { transform: translateY(6px) scale(.98) rotate(1deg); }
  100% { transform: translateY(0) scale(1) rotate(0); }
}
.metric:nth-child(1):hover { animation: metricKickAsym .9s ease; }
.metric:nth-child(2):hover { animation: metricKickAsym .9s ease .1s; }
.metric:nth-child(3):hover { animation: metricKickAsym .9s ease .2s; }
.metric:nth-child(4):hover { animation: metricKickAsym .9s ease .3s; }

/* Split bar continuous shine sweep */
@keyframes splitShine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.split-bar { position: relative; overflow: hidden; }
.split-bar::after {
  content:"";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transform: translateX(-100%);
  animation: splitShine 5s ease-in-out infinite 2s;
  pointer-events: none;
}

/* Creator card asymmetric origin tilt (design principle: dynamic balance) */
.creator-card:nth-child(odd)  { transform-origin: left bottom; }
.creator-card:nth-child(even) { transform-origin: right top; }
.creator-card:hover {
  transform: perspective(900px) rotateX(-3deg) rotateY(3deg) translateY(-6px);
  transition: transform .5s ease;
}
.creator-card:nth-child(even):hover {
  transform: perspective(900px) rotateX(-3deg) rotateY(-3deg) translateY(-6px);
}

/* Vertical gold rail — for a flowing line between sections */
.vertical-rail-dots {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(245,197,24,.3), transparent);
  transform: translateX(-50%);
}

/* Product showcase diagonal spotlight */
@keyframes diagSweep {
  0%   { transform: translate(-50%, -50%) rotate(0deg); opacity: .5; }
  50%  { opacity: .9; }
  100% { transform: translate(-50%, -50%) rotate(360deg); opacity: .5; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-dir] { transition: opacity .4s ease; transform: none !important; filter: none !important; }
  .course-mockup, .ebook-mockup .ebook-cover, .split-bar::after { animation: none !important; }
  #how .how-bg-video { animation: none !important; }
}

/* ============================================================
   HOW IT WORKS — cinematic animated bg + card choreography
   ============================================================ */
.how-bg-wrap {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.how-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .85;
  filter: saturate(1.2) contrast(1.08) hue-rotate(-6deg);
  transform: scale(1.06);
  animation: howBgBreathe 16s ease-in-out infinite;
  will-change: transform, filter;
}
@keyframes howBgBreathe {
  0%,100% { transform: scale(1.06) translate3d(0,0,0); filter: saturate(1.15) contrast(1.05) hue-rotate(-6deg); }
  50%     { transform: scale(1.12) translate3d(0,-1%,0); filter: saturate(1.3)  contrast(1.1)  hue-rotate(-2deg); }
}
/* Warm gold tint layered over the video so it plays with brand */
.how-bg-tint {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.12) 35%, rgba(10,10,10,.2) 70%, rgba(10,10,10,.8) 100%),
    radial-gradient(ellipse at 50% 40%, rgba(245,197,24,.08), transparent 55%);
  mix-blend-mode: normal;
}
/* Soft vignette to focus the eye on the card grid */
.how-bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 55%, transparent 45%, rgba(10,10,10,.45) 95%);
}
/* Top + bottom bleed so the section blends with adjacent black sections */
/* Remove hairline borders around the cinematic sections */
#how, #who { border-top: none !important; }
#how + section, section + #how,
#who + section, section + #who { border-top: none !important; }

/* Fade the entire video-bg layer (video + tint + vignette + grain) into transparency
   at top and bottom so sections above/below bleed through seamlessly.
   Using a mask means the body background is the single source of truth at the seam. */
#how .how-bg-wrap,
#who .how-bg-wrap {
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,.15) 6%,
    rgba(0,0,0,.6) 14%,
    #000 24%,
    #000 76%,
    rgba(0,0,0,.6) 86%,
    rgba(0,0,0,.15) 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0,0,0,.15) 6%,
    rgba(0,0,0,.6) 14%,
    #000 24%,
    #000 76%,
    rgba(0,0,0,.6) 86%,
    rgba(0,0,0,.15) 94%,
    transparent 100%
  );
}
/* Subtle film-grain */
.how-bg-grain {
  position: absolute; inset: -20%;
  background-image:
    radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    radial-gradient(rgba(245,197,24,.04) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  opacity: .15;
  mix-blend-mode: overlay;
  animation: grainShift 9s steps(8) infinite;
}
@keyframes grainShift {
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(-2%,1%,0); }
  50%  { transform: translate3d(1%,-2%,0); }
  75%  { transform: translate3d(-1%,2%,0); }
  100% { transform: translate3d(0,0,0); }
}

/* Step cards — pulled forward of the bg, gets a gold edge on reveal */
.how-cards .step-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, rgba(20,20,20,.78), rgba(14,14,14,.72));
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 60px -20px rgba(0,0,0,.6);
  transition: transform .6s cubic-bezier(.2,.9,.2,1.05), opacity .6s ease, border-color .6s ease, box-shadow .6s ease;
}
.how-cards .step-card:hover {
  border-color: rgba(245,197,24,.35);
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset,
              0 30px 80px -20px rgba(0,0,0,.7),
              0 0 0 1px rgba(245,197,24,.15),
              0 0 40px -10px rgba(245,197,24,.35);
}
/* Shine sweep that fires once as the card enters */
.how-cards .step-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(245,197,24,.18) 48%, rgba(255,255,255,.08) 52%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
  opacity: 0;
}
.how-cards .step-card[data-dir].in::after {
  animation: cardShine 1.4s cubic-bezier(.2,.8,.2,1) .25s 1 forwards;
}
@keyframes cardShine {
  0%   { transform: translateX(-120%); opacity: 0; }
  20%  { opacity: .9; }
  100% { transform: translateX(120%); opacity: 0; }
}

/* Stronger entrance transitions specifically for #how (overrides default data-dir timing) */
#how [data-dir] {
  transition-duration: .9s;
  transition-timing-function: cubic-bezier(.2,.9,.2,1.05);
}

/* Pulsing gold number badge synced to video breathing */
.how-cards .step-card .step-num {
  position: relative;
}
.how-cards .step-card[data-dir].in .step-num {
  animation: stepNumPulse 3.2s ease-in-out 1.2s infinite;
}
@keyframes stepNumPulse {
  0%,100% { text-shadow: 0 0 0 rgba(245,197,24,0); }
  50%     { text-shadow: 0 0 22px rgba(245,197,24,.35), 0 0 2px rgba(245,197,24,.5); }
}

/* ============================================================
   GLOBAL MOUSE-REACTIVE AMBIENT TEXTURE
   Fixed behind all content. Hidden over the hero (transparent).
   ============================================================ */
#ambient-texture {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;              /* behind all content & cursor glow */
  opacity: 0;              /* fades in after leaving hero */
  transition: opacity .8s ease;
  mix-blend-mode: screen;
}
body.past-hero #ambient-texture {
  opacity: .55;
}
/* Keep every actual section above the canvas */
section, footer { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  #ambient-texture { display: none; }
}

/* ============================================================
   CARTOON CREATOR ILLUSTRATION — jumping for joy
   ============================================================ */
.portrait-cartoon {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.cartoon-svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cartoon-svg .character {
  transform-origin: 200px 450px;
  animation: charJump 1.8s ease-in-out infinite;
}
@keyframes charJump {
  0%, 100% { transform: translateY(0)    rotate(0); }
  40%      { transform: translateY(-14px) rotate(-1.5deg); }
  60%      { transform: translateY(-14px) rotate(1.5deg); }
}

.cartoon-svg .head {
  transform-origin: 200px 210px;
  animation: headBob 1.8s ease-in-out infinite;
}
@keyframes headBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-3px) rotate(3deg); }
}

.cartoon-svg .arm-left {
  transform-origin: 158px 220px;
  animation: armLeftWave 1.8s ease-in-out infinite;
}
.cartoon-svg .arm-right {
  transform-origin: 245px 220px;
  animation: armRightWave 1.8s ease-in-out infinite;
}
@keyframes armLeftWave  { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
@keyframes armRightWave { 0%,100% { transform: rotate(0); } 50% { transform: rotate(8deg); } }

.cartoon-svg .hair-back {
  transform-origin: 200px 150px;
  animation: hairSway 2.4s ease-in-out infinite;
}
@keyframes hairSway {
  0%, 100% { transform: rotate(-1deg) translateY(0); }
  50%      { transform: rotate(2deg)  translateY(-2px); }
}

.cartoon-svg .eyes .eye {
  transform-origin: center;
  animation: blink 4.8s ease-in-out infinite;
}
@keyframes blink {
  0%, 94%, 100% { transform: scaleY(1); }
  96%           { transform: scaleY(0.1); }
}

.cartoon-svg .mouth {
  transform-origin: 200px 205px;
  animation: mouthLaugh 0.9s ease-in-out infinite;
}
@keyframes mouthLaugh {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08, 1.15); }
}

.cartoon-svg .blush {
  transform-origin: center;
  animation: blushPulse 2.2s ease-in-out infinite;
}
@keyframes blushPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

.cartoon-svg .swirl {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: swirlTrace 2.6s ease-in-out infinite;
}
.cartoon-svg .s1 { animation-delay: 0s;   }
.cartoon-svg .s2 { animation-delay: 0.3s; }
.cartoon-svg .s3 { animation-delay: 0.6s; }
.cartoon-svg .s4 { animation-delay: 0.9s; }
@keyframes swirlTrace {
  0%   { stroke-dashoffset: 120; opacity: 0; }
  40%  { stroke-dashoffset: 0;   opacity: 0.8; }
  100% { stroke-dashoffset: -120; opacity: 0; }
}

.cartoon-svg .stars .star {
  transform-origin: center;
  opacity: 0;
  animation-duration: 3.2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
.cartoon-svg .stars .st1 { animation-name: starFloat1; animation-delay: 0s;   }
.cartoon-svg .stars .st2 { animation-name: starFloat2; animation-delay: 0.4s; }
.cartoon-svg .stars .st3 { animation-name: starFloat3; animation-delay: 0.8s; }
.cartoon-svg .stars .st4 { animation-name: starFloat4; animation-delay: 1.2s; }
.cartoon-svg .stars .st5 { animation-name: starFloat5; animation-delay: 1.6s; }
.cartoon-svg .stars .st6 { animation-name: starFloat6; animation-delay: 2.0s; }
.cartoon-svg .stars .st7 { animation-name: starFloat7; animation-delay: 2.4s; }

@keyframes starFloat1 {
  0%,100% { opacity:0; transform: translate(80px,120px)  rotate(0)      scale(.7); }
  50%     { opacity:1; transform: translate(60px,90px)   rotate(30deg)  scale(1.2); }
}
@keyframes starFloat2 {
  0%,100% { opacity:0; transform: translate(330px,90px)  rotate(0)      scale(.7); }
  50%     { opacity:1; transform: translate(350px,70px)  rotate(-30deg) scale(1.2); }
}
@keyframes starFloat3 {
  0%,100% { opacity:0; transform: translate(50px,260px)  rotate(0)      scale(.7); }
  50%     { opacity:1; transform: translate(30px,240px)  rotate(45deg)  scale(1.2); }
}
@keyframes starFloat4 {
  0%,100% { opacity:0; transform: translate(355px,240px) rotate(0)      scale(.7); }
  50%     { opacity:1; transform: translate(375px,220px) rotate(-45deg) scale(1.2); }
}
@keyframes starFloat5 {
  0%,100% { opacity:0; transform: translate(70px,400px)  rotate(0)      scale(.7); }
  50%     { opacity:1; transform: translate(50px,380px)  rotate(30deg)  scale(1.2); }
}
@keyframes starFloat6 {
  0%,100% { opacity:0; transform: translate(340px,380px) rotate(0)      scale(.7); }
  50%     { opacity:1; transform: translate(360px,360px) rotate(-30deg) scale(1.2); }
}
@keyframes starFloat7 {
  0%,100% { opacity:0; transform: translate(200px,60px)  rotate(0)      scale(.6); }
  50%     { opacity:1; transform: translate(200px,30px)  rotate(180deg) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .cartoon-svg * { animation: none !important; }
}

/* ============================================================
   WHO IT'S FOR — reuse .how-bg-* classes, add #who bleed
   ============================================================ */

#who .max-w-6xl { position: relative; z-index: 3; }
#who .how-bg-video { opacity: .55; }
#who .creator-card {
  background: rgba(14,14,14,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.06);
}
@media (prefers-reduced-motion: reduce) {
  #who .how-bg-video { animation: none !important; }
}


/* ============================================================
   FINAL POLISH — unify hover lifts, focus rings, card rhythm
   ============================================================ */
.creator-card,
.step-card,
.faq-item,
.partner-card,
.perk,
.pitch-stat {
  transition:
    transform .4s cubic-bezier(.2,.7,.2,1),
    border-color .4s ease,
    background-color .4s ease,
    box-shadow .4s ease;
}
.creator-card:hover,
.step-card:hover,
.partner-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245,197,24,.22);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(245,197,24,.04);
}

/* Consistent focus ring across all interactives */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid rgba(245,197,24,.65);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Apply form — match card visual language everywhere */
#apply input,
#apply select,
#apply textarea {
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
#apply input:focus,
#apply select:focus,
#apply textarea:focus {
  border-color: rgba(245,197,24,.5);
  box-shadow: 0 0 0 3px rgba(245,197,24,.12);
}

/* Scroll-margin so chapter jumps land under the sticky chrome */
section[id] { scroll-margin-top: 80px; }

/* Section hairlines: let the gradient do the work, keep the line whisper-quiet */
section.border-t { border-top-color: rgba(255,255,255,.04) !important; }

/* Image / avatar consistency — subtle gold ring + soft shadow */
.creator-avatar {
  box-shadow: 0 0 0 1px rgba(245,197,24,.18), 0 10px 24px -12px rgba(0,0,0,.5);
}

/* Selection — on-brand */
::selection { background: rgba(245,197,24,.35); color: #0a0a0a; }
::-moz-selection { background: rgba(245,197,24,.35); color: #0a0a0a; }

/* Reduce emphasis on browsers without backdrop-filter so cards never look flat */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #how .step-card, #who .creator-card { background: rgba(14,14,14,.92); }
}


/* ============================================================
   GLOBAL SEAM REMOVAL — keep original textured bg, just remove hairlines
   ============================================================ */
body > section,
body > footer {
  border-top: none !important;
}

/* Ambient canvas: feather into nothing at top + bottom so no band cuts visibly */
#ambient-texture {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}


/* ============================================================
   SECTION RIBBON — subtle gold divider between FAQ and CTA
   ============================================================ */
.section-ribbon {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  max-width: 780px;
  margin: 0 auto;
  padding: 0 2rem;
  pointer-events: none;
}
.section-ribbon-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(245,197,24,.08) 20%,
    rgba(245,197,24,.35) 50%,
    rgba(245,197,24,.08) 80%,
    transparent 100%);
}
.section-ribbon-mark {
  color: rgba(245,197,24,.75);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(245,197,24,.28);
  border-radius: 999px;
  background: rgba(10,10,10,.6);
  box-shadow: 0 0 24px rgba(245,197,24,.12), inset 0 0 8px rgba(245,197,24,.08);
  animation: ribbonGlow 4.5s ease-in-out infinite;
}
@keyframes ribbonGlow {
  0%,100% { box-shadow: 0 0 14px rgba(245,197,24,.10), inset 0 0 6px rgba(245,197,24,.06); }
  50%     { box-shadow: 0 0 32px rgba(245,197,24,.22), inset 0 0 12px rgba(245,197,24,.12); }
}
@media (prefers-reduced-motion: reduce) {
  .section-ribbon-mark { animation: none !important; }
}