/* Scroll choreography + hover polish (loads after styles.css) */

/* scroll progress thread */
.progress { position: fixed; z-index: 70; left: 0; top: 0; height: 3px; width: 100%; background: linear-gradient(90deg, var(--copper), #f0a46f); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; }

/* pointer light (JS sets --mx / --my) */
.glow { position: relative; }
.glow::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .5s var(--ease); background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 224, 196, .32), transparent 60%); mix-blend-mode: soft-light; }
.glow:hover::before { opacity: 1; }
.tilt { transform-style: preserve-3d; transition: transform .7s var(--ease); will-change: transform; }
.tilt.tilting { transition: transform .12s linear; }

/* headings rise word by word */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .02em .14em; margin: -.08em -.02em -.14em; }
.split .w > span { display: inline-block; transform: translateY(112%) rotate(3deg); transition: transform 1.1s var(--ease); transition-delay: calc(var(--wi) * 70ms); }
.split.in .w > span { transform: none; }

/* images unfold into their frames as the block scrolls in */
@media (prefers-reduced-motion: no-preference) {
  .wipe { clip-path: inset(14% 14% 14% 14% round 2px); scale: 1.3; transition: clip-path 1.4s var(--ease), scale 1.6s var(--ease); }
  .wipe.in { clip-path: inset(0 round 2px); scale: 1; }
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    .wipe { transition: none; clip-path: inset(0 round 2px); scale: 1; animation: unfold linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    @keyframes unfold { from { clip-path: inset(14% 14% 14% 14% round 2px); scale: 1.3; } }
    .hero-inner { animation: leave linear both; animation-timeline: scroll(root); animation-range: 0 70svh; }
    @keyframes leave { to { opacity: 0; transform: translateY(-70px); } }
    .fab-row img { animation: roll linear both; animation-timeline: view(); animation-range: entry 0% cover 55%; }
    @keyframes roll { from { rotate: -40deg; scale: .6; } }
    .section-head .eyebrow::before { content: ""; display: inline-block; width: 0; height: 1px; margin-right: 0; vertical-align: middle; background: var(--copper); animation: dash linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes dash { to { width: 34px; margin-right: 12px; } }
  }
}

/* process steps light up in turn */
.steps li { opacity: .42; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.steps li.on, .steps li:hover { opacity: 1; }
.steps li span { transition: transform .7s var(--ease), color .5s; }
.steps li.on span { transform: scale(1.18) translateX(4px); }

/* ---------- hover effects ---------- */
.card { transition: transform .6s var(--ease); }
.card:hover { transform: translateY(-6px); }
.card h3 { position: relative; display: inline-block; width: fit-content; }
.card h3::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%; background: var(--copper); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.card:hover h3::after { transform: scaleX(1); transform-origin: left; }
.card .ph { transition: box-shadow .6s var(--ease); }
.card:hover .ph { box-shadow: 0 24px 50px -18px rgba(74, 18, 69, .45); }
.price { transition: color .3s, letter-spacing .5s var(--ease); }
.card:hover .price { color: var(--copper); letter-spacing: .06em; }
.tag { transition: background .3s, color .3s, transform .5s var(--ease); }
.card:hover .tag { background: var(--copper); color: #fff; transform: translateY(-2px); }

.cat::after { z-index: 1; }
.cat-label, .occ-card span { transition: transform .7s var(--ease); }
.cat:hover .cat-label, .occ-card:hover span { transform: translateY(-8px); }
.sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 214, .35) 50%, transparent 62%); transform: translateX(-120%); }
.cat:hover .sheen, .occ-card:hover .sheen { transform: translateX(120%); transition: transform 1.1s var(--ease); }
.cat-label strong { position: relative; display: inline-block; }
.cat-label strong::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 1px; background: #f3a877; transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.cat:hover .cat-label strong::after { transform: scaleX(1); }
.occ-card strong { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .6s var(--ease); }
.occ-card:hover strong { background-size: 100% 1px; }

.strip li { transition: background .5s var(--ease), transform .5s var(--ease); }
.strip li:hover { background: rgba(207, 95, 39, .08); transform: translateY(-3px); }
.strip b { transition: color .3s; }
.strip li:hover b { color: var(--copper); }

.fab-row span { width: fit-content; margin-inline: auto; transition: color .3s, letter-spacing .5s var(--ease); }
.fab-row a:hover span { color: var(--copper); letter-spacing: .06em; }

.faq summary { transition: color .3s, padding-left .5s var(--ease); }
.faq summary:hover { color: var(--copper); padding-left: 10px; }

.footer nav li a, .linkbtn { display: inline-block; transition: color .25s, transform .4s var(--ease); }
.footer nav li a:hover, .linkbtn:hover { transform: translateX(6px); }
.foot-brand img { transition: transform .6s var(--ease); }
.foot-brand img:hover { transform: rotate(-1.5deg) scale(1.03); }

.brand img { transition: width .4s var(--ease), transform .5s var(--ease); }
.brand:hover img { transform: scale(1.04); }
.icon-btn { transition: background .3s, transform .5s var(--ease), color .3s; }
.icon-btn:hover { transform: translateY(-2px); color: var(--copper); }

.btn-copper, .btn-solid, .btn-light { transition: color .35s var(--ease), border-color .35s, transform .35s var(--ease), box-shadow .5s var(--ease); }
.btn-copper:hover, .btn-solid:hover, .btn-light:hover { box-shadow: 0 14px 30px -12px rgba(184, 80, 31, .6); }

.banner { background-size: 115%; background-position: 40% 50%; transition: background-position 1.4s var(--ease); }
.banner:hover { background-position: 60% 50%; }

@media (hover: none) {
  .card:hover, .strip li:hover { transform: none; }
  .glow::before, .sheen { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .split .w > span { transform: none; transition: none; }
  .wipe { clip-path: none; scale: 1; transition: none; }
  .steps li { opacity: 1; }
  .progress { display: none; }
}

/* ---------- banner animations: thread, sheen, dust ---------- */
.hero, .banner { position: relative; }
.thread-fx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: visible; }
.banner .thread-fx { z-index: 0; }
.banner .wrap { position: relative; z-index: 1; }
.thread-fx path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.t-draw { stroke: #f08a4b; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(240, 138, 75, .7)); animation: draw 3.6s var(--ease) .6s forwards; }
.t-glint { stroke: #fff2e2; stroke-width: 3; stroke-dasharray: .06 1; stroke-dashoffset: .06; opacity: 0; filter: drop-shadow(0 0 8px #ffd2a8); animation: travel 7s linear 4.2s infinite; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes travel { 0% { stroke-dashoffset: .06; opacity: 1; } 70% { stroke-dashoffset: -1; opacity: 1; } 71%, 100% { stroke-dashoffset: -1; opacity: 0; } }

.hero-sheen { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 214, 180, .14) 48%, rgba(255, 214, 180, .22) 50%, transparent 62%); transform: translateX(-100%); animation: sweep 9s var(--ease) 2.4s infinite; }
@keyframes sweep { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }

.dust { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.banner .dust { z-index: 0; }
.dust i { position: absolute; bottom: -12px; width: var(--s); height: var(--s); border-radius: 50%; background: #f3a877; box-shadow: 0 0 10px 2px rgba(243, 168, 119, .6); opacity: 0; animation: float var(--t) linear var(--dl) infinite; }
@keyframes float { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .85; } 80% { opacity: .5; } 100% { transform: translate(var(--dx), -105vh); opacity: 0; } }

/* hero headline: italic word breathes */
.hero h1 em .w > span { background: linear-gradient(100deg, #f3a877 20%, #ffe2c6 45%, #f3a877 70%) 0 0 / 250% 100% no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 6s ease-in-out 2s infinite; }
@keyframes shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* CTA banner: flowing silk, slow zoom, rising copy */
.banner { background-size: 130%; animation: silkflow 18s ease-in-out infinite alternate; }
@keyframes silkflow { from { background-position: 20% 40%; } to { background-position: 80% 60%; } }
.banner { overflow: hidden; }
.banner::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 60%; pointer-events: none; background: radial-gradient(closest-side, rgba(243, 168, 119, .22), transparent); animation: roam 12s ease-in-out infinite alternate; }
@keyframes roam { to { transform: translateX(150%); } }
.banner .btn-copper { animation: nudge 3.4s ease-in-out 2s infinite; }
@keyframes nudge { 0%, 88%, 100% { transform: none; } 92% { transform: translateY(-4px); } 96% { transform: translateY(1px); } }
.banner:hover { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .t-draw { stroke-dashoffset: 0; animation: none; }
  .t-glint, .hero-sheen, .dust i, .banner, .banner::after, .banner .btn-copper, .hero h1 em .w > span { animation: none; }
  .hero h1 em .w > span { -webkit-text-fill-color: currentColor; background: none; color: #f3a877; }
}