/* Home page motion. Everything animates transform / opacity / clip-path only,
   and js/effects.js skips the scroll effects when the visitor prefers reduced motion. */

:root {
  --yfx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --yfx-gold: #c8b47e;
  --yfx-gold-light: #ecdcae;
}

/* Reading progress */
.yfx-progress {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--champagne), var(--yfx-gold-light));
  transform: scaleX(var(--yfx-progress, 0));
  transform-origin: 0 50%;
  pointer-events: none;
}

.admin-bar .yfx-progress {
  top: 32px;
}

/* ---------------------------------------------------------------- Hero */
.home-page .hero-media {
  animation: yfx-kenburns 2.8s var(--yfx-ease) both;
  will-change: transform;
}

@keyframes yfx-kenburns {
  from {
    scale: 1.18;
    opacity: 0.4;
  }
  to {
    scale: 1.03;
    opacity: 1;
  }
}

.home-page .hero-content {
  translate: 0 var(--yfx-cy, 0);
  opacity: var(--yfx-co, 1);
}

.home-page .hero-content > * {
  animation: yfx-rise 1.1s var(--yfx-ease) both;
}

.home-page .hero-content > .eyebrow {
  animation-delay: 0.25s;
}

.home-page .hero-content > h1 {
  animation-name: yfx-focus;
  animation-duration: 1.4s;
  animation-delay: 0.35s;
}

.home-page .hero-content > .hero-lead {
  animation-delay: 0.75s;
}

.home-page .hero-content > .hero-actions {
  animation-delay: 0.95s;
}

@keyframes yfx-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes yfx-focus {
  from {
    opacity: 0;
    filter: blur(14px);
    letter-spacing: 0.06em;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Hand-drawn gold signature under the headline */
.home-page .hero-content > .yfx-signature {
  width: min(520px, 78%);
  height: auto;
  margin: -6px auto 22px;
  overflow: visible;
  animation: none;
}

.yfx-signature path {
  fill: none;
  stroke: var(--yfx-gold);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(236, 220, 174, 0.55));
  animation: yfx-draw 2.2s cubic-bezier(0.65, 0, 0.35, 1) 1.15s forwards;
}

.yfx-signature circle {
  fill: var(--yfx-gold-light);
  opacity: 0;
  animation: yfx-ink 0.6s ease-out 3.2s forwards;
}

@keyframes yfx-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes yfx-ink {
  from {
    opacity: 0;
    r: 0;
  }
  to {
    opacity: 1;
    r: 4;
  }
}

/* Floating gold ink particles */
.yfx-dust {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Scroll cue */
.yfx-scroll-cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 26px;
  width: 1px;
  height: 56px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
  translate: -50% 0;
  opacity: var(--yfx-co, 1);
  animation: yfx-rise 1s var(--yfx-ease) 1.6s both;
}

.yfx-scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, var(--yfx-gold-light));
  animation: yfx-cue 2.2s ease-in-out 2s infinite;
  translate: 0 -100%;
}

@keyframes yfx-cue {
  0% {
    translate: 0 -100%;
  }
  60%,
  100% {
    translate: 0 100%;
  }
}

/* ------------------------------------------------------- Scroll reveal */
.yiren-fx .yfx-reveal {
  opacity: 0;
  translate: 0 42px;
  transition:
    opacity 0.9s var(--yfx-ease),
    translate 1s var(--yfx-ease);
  transition-delay: var(--yfx-delay, 0s);
}

.yiren-fx .yfx-reveal.is-in {
  opacity: 1;
  translate: none;
}

/* Business images: curtain wipe + settle */
.yiren-fx .business-media.yfx-wipe {
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.18, 1);
}

.yiren-fx .business-story:nth-child(even) .business-media.yfx-wipe {
  clip-path: inset(0 100% 0 0);
}

.yiren-fx .business-media.yfx-wipe.is-in {
  clip-path: inset(0);
}

.home-page .business-media img {
  scale: 1.12;
  translate: 0 var(--yfx-py, 0);
  transition:
    scale 1.8s var(--yfx-ease),
    filter 0.6s ease;
}

.home-page .business-media.is-in img {
  scale: 1.04;
}

.home-page .business-story:hover .business-media img {
  scale: 1.09;
  filter: sepia(0) saturate(1) contrast(1.04);
}

/* Service process: gold line fills while scrolling */
.home-page .process {
  position: relative;
}

.home-page .process::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--champagne), var(--yfx-gold-light));
  transform: scaleX(var(--yfx-proc, 0));
  transform-origin: 0 50%;
}

.home-page .process > div::before {
  z-index: 1;
  transition:
    background 0.4s ease,
    box-shadow 0.4s ease,
    scale 0.4s ease;
}

.home-page .process > div.is-lit::before {
  background: var(--yfx-gold);
  box-shadow: 0 0 0 6px rgba(200, 180, 126, 0.2);
  scale: 1.35;
}

.home-page .process strong {
  transition: color 0.4s ease;
}

.home-page .process > div.is-lit strong {
  color: var(--olive-dark);
}

/* Quality cards: gold sweep on hover */
.home-page .quality-grid article {
  position: relative;
  overflow: hidden;
  transition: background 0.5s ease;
}

.home-page .quality-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(200, 180, 126, 0.22));
  transform: translateY(100%);
  transition: transform 0.6s var(--yfx-ease);
}

.home-page .quality-grid article:hover::before {
  transform: none;
}

.home-page .quality-grid article > * {
  position: relative;
}

.home-page .quality-grid article > span {
  display: inline-block;
  transition:
    scale 0.5s var(--yfx-ease),
    color 0.5s ease;
  transform-origin: 0 50%;
}

.home-page .quality-grid article:hover > span {
  color: var(--yfx-gold-light);
  scale: 1.6;
}

/* Buttons: light sweep (+ magnetic pull from js) */
.home-page .primary-btn,
.home-page .lead-form button {
  position: relative;
  overflow: hidden;
  transition:
    background var(--ease),
    border-color var(--ease),
    translate 0.35s var(--yfx-ease);
}

.home-page .primary-btn::after,
.home-page .lead-form button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.8s var(--yfx-ease);
  pointer-events: none;
}

.home-page .primary-btn:hover::after,
.home-page .lead-form button:hover::after {
  transform: translateX(120%);
}

.home-page .text-link {
  background: linear-gradient(var(--yfx-gold-light), var(--yfx-gold-light)) 0 100% / 0 1px no-repeat;
  transition: background-size 0.5s var(--yfx-ease), translate 0.35s var(--yfx-ease);
}

.home-page .text-link:hover {
  background-size: 100% 1px;
}

/* Stats: gold rule grows under each number */
.home-page .overview-stats article {
  position: relative;
}

.yiren-fx .home-page .overview-stats article::after,
.yiren-fx.home-page .overview-stats article::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42px;
  height: 1px;
  background: var(--yfx-gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--yfx-ease) 0.4s;
}

.yiren-fx .overview-stats article.is-in::after {
  transform: none;
}

@media (max-width: 760px) {
  .yfx-scroll-cue {
    display: none;
  }

  .home-page .hero-content > .yfx-signature {
    width: 86%;
    margin-bottom: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .hero-media,
  .home-page .hero-content > * {
    animation: none;
  }

  .yfx-signature path {
    animation: none;
    stroke-dashoffset: 0;
  }

  .yfx-signature circle {
    animation: none;
    opacity: 1;
  }

  .yfx-scroll-cue {
    display: none;
  }
}