/* =========================================================
   Hero "Mend": gold-repaired glass, steerable chips, live repair story
   Loaded after home.css, so it can override the old hero rules.
   ========================================================= */

.hx {
    --hx-glow: rgba(242, 183, 5, .16);
    background:
        radial-gradient(50rem 28rem at 100% 0%, var(--hx-glow), transparent 60%),
        radial-gradient(60rem 30rem at 0% 0%, var(--mint), transparent 60%),
        var(--soft);
}
/* the light follows the visitor's real local time (set by hero.js) */
.hx[data-tod="dawn"]  { --hx-glow: rgba(255, 160, 90, .30); }
.hx[data-tod="dusk"]  { --hx-glow: rgba(255, 120, 70, .24); }
.hx[data-tod="night"] { --hx-glow: rgba(30, 120, 90, .30); }

/* ---------- Drifting tool icons behind everything ---------- */
.hx-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hx-bg i {
    position: absolute; left: var(--x); top: var(--y); font-size: var(--s);
    color: rgba(15, 79, 59, .09);
    animation: hx-drift var(--t) ease-in-out infinite alternate;
}
@keyframes hx-drift {
    from { transform: translate(0, 0) rotate(-8deg); }
    to   { transform: translate(18px, -26px) rotate(10deg); }
}

/* ---------- Headline: words rise in, "you." carries a gold sheen ---------- */
.hx .hero-title { animation: none; }
.hx-w {
    display: inline-block; opacity: 0; transform: translateY(.45em);
    animation: hx-word .8s cubic-bezier(.2, .7, .2, 1) forwards;
    animation-delay: calc(var(--i) * 110ms + 120ms);
}
@keyframes hx-word { to { opacity: 1; transform: none; } }

.hx-w.hx-gold {
    background: linear-gradient(100deg, var(--fx-green-900) 35%, #c99700 50%, var(--fx-green-900) 65%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    animation: hx-word .8s cubic-bezier(.2, .7, .2, 1) forwards, hx-sheen 6s ease-in-out infinite;
    animation-delay: calc(var(--i) * 110ms + 120ms), 1.6s;
}
@keyframes hx-sheen { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

/* ---------- Rotating problem line ---------- */
.hx-rotor {
    min-height: 1.9em; margin: 0 0 1rem;
    font-family: "Space Grotesk", sans-serif; font-weight: 600;
    font-size: clamp(1.15rem, 2.4vw, 1.5rem); color: var(--fx-ink);
}
.hx-rotor-word {
    position: relative; display: inline-block; color: var(--fx-green-800);
    transition: opacity .2s ease, transform .2s ease, filter .2s ease;
}
.hx-rotor-word::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.12em; height: 3px; border-radius: 2px;
    background: var(--fx-accent); transform: scaleX(0); transform-origin: left;
    transition: transform .55s cubic-bezier(.2, .7, .2, 1);
}
.hx-rotor-word.is-in::after { transform: scaleX(1); }
.hx-rotor-word.is-out { opacity: 0; transform: translateY(-.5em); filter: blur(3px); }
.hx-rotor-word.is-pre { opacity: 0; transform: translateY(.5em); filter: blur(3px); transition: none; }



/* ---------- Main button shimmer ---------- */
.hx-cta { position: relative; overflow: hidden; }
.hx-cta::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg); animation: hx-shine 5.5s ease-in-out 2s infinite; pointer-events: none;
}
@keyframes hx-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* ---------- Photo, glass and gold seams ---------- */
.hx .hero-photo {
    cursor: crosshair;
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .25s ease-out;
}
.hx .hero-photo img { animation: hx-zoom 24s ease-in-out infinite alternate; transform-origin: 60% 50%; }
@keyframes hx-zoom { from { transform: scale(1.02); } to { transform: scale(1.12); } }

.hx-scrim { position: absolute; inset: auto 0 0 0; z-index: 1; height: 55%; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(11, 61, 46, .6)); }
.hx-veil { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none;
    background: radial-gradient(circle at var(--vx, 50%) var(--vy, 50%), rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 55%); }

.hx-glass {
    position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(242, 183, 5, .55));
}
.hx-glass path { fill: none; stroke-linejoin: round; }
.hx-cr { stroke: rgba(255, 255, 255, .95); stroke-width: 1.2; stroke-linecap: butt; }
.hx-au { stroke: #F2B705; stroke-width: 2.4; stroke-linecap: round; }
.hx-lite .hx-glass { filter: none; }

.hx-tip {
    position: absolute; top: .9rem; left: .9rem; z-index: 3; margin: 0;
    display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .8rem; border-radius: 999px;
    background: rgba(11, 61, 46, .72); color: #fff; font-size: .8rem; font-weight: 600; pointer-events: none;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: opacity .5s ease, transform .5s ease;
}
.hx-tip i { color: var(--fx-accent); }
.hx-tip.is-gone { opacity: 0; transform: translateY(-6px); }

/* ---------- Live repair story ---------- */
.hx-storywrap {
    position: absolute; left: .9rem; right: .9rem; bottom: .9rem; z-index: 3;
    display: flex; flex-direction: column; gap: .55rem; pointer-events: none;
}
@media (min-width: 576px) { .hx-storywrap { right: auto; width: 21rem; } }
.hx-story { display: grid; }
.hx-card {
    grid-area: 1 / 1; display: flex; align-items: center; gap: .8rem; padding: .8rem .95rem;
    background: #fff; border-radius: 1rem; box-shadow: 0 14px 34px rgba(11, 61, 46, .28);
    opacity: 0; transform: translateY(14px) scale(.97);
    transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}
.hx-card.is-on { opacity: 1; transform: none; }
.hx-card-ic {
    flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
    border-radius: .75rem; background: var(--fx-accent); color: var(--fx-ink); font-size: 1.15rem;
}
.hx-card:last-child .hx-card-ic { background: var(--fx-green-900); color: var(--fx-accent); }
.hx-card-tx strong { display: block; font-size: .95rem; line-height: 1.2; color: var(--fx-green-900); }
.hx-card-tx span { display: block; font-size: .8rem; line-height: 1.3; color: var(--muted); }
.hx-approve {
    flex: none; margin-left: auto; padding: .4rem .8rem; border-radius: .6rem;
    background: var(--fx-green-900); color: #fff; font-size: .8rem; font-weight: 700;
    transition: transform .15s ease, background-color .25s ease;
}
.hx-card.is-pressed .hx-approve { transform: scale(.9); background: #198754; }

.hx-dots { display: flex; gap: .35rem; padding-left: .2rem; }
.hx-dots i {
    width: .45rem; height: .45rem; border-radius: 50%; background: rgba(255, 255, 255, .5);
    transition: width .3s ease, background-color .3s ease;
}
.hx-dots i.is-on { width: 1.4rem; border-radius: 999px; background: var(--fx-accent); }

/* ---------- Layout tweaks ---------- */
@media (max-width: 991.98px) { .hx .hero-visual { padding-bottom: 1.25rem; } }

/* ---------- Off-screen: pause the looping animations ---------- */
.hx.is-off .hero-photo img,
.hx.is-off .hx-bg i,
.hx.is-off .hx-cta::after,
.hx.is-off .hx-w.hx-gold { animation-play-state: paused; }

/* ---------- Reduced motion: clean static hero ---------- */
@media (prefers-reduced-motion: reduce) {
    .hx *, .hx *::before, .hx *::after { animation: none !important; transition: none !important; }
    .hx-w { opacity: 1; transform: none; }
}