/* ────────────────────────────────────────────────────────────────────────────
   Lonerock extras — animation primitives, hardcoded keyframes, and component
   styles that go beyond the Tailwind utility layer compiled into main.css.
   ──────────────────────────────────────────────────────────────────────────── */

/* Base reveal — invisible until JS toggles .is-visible */
.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Kinetic word reveal — slide up from below */
.kinetic-word {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--kw-delay, 0s);
}
.kinetic-word.is-visible,
body.is-loaded .kinetic-word {
    transform: translateY(0);
}
.kinetic-highlight {
    transform: scaleX(0);
    transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--kh-delay, 0s);
}
body.is-loaded .kinetic-highlight,
.kinetic-word.is-visible .kinetic-highlight {
    transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
    .kinetic-word,
    .kinetic-highlight {
        transform: none;
        transition: none;
    }
}

/* Soft pulse for the kinetic highlight base layer */
@keyframes pulse-soft {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
}
.animate-pulse-soft {
    animation: pulse-soft 1.8s ease-in-out infinite;
}

/* Kinetic shimmer (sweep across highlight bar) */
@keyframes kinetic-shimmer {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}
.kinetic-shimmer {
    animation: kinetic-shimmer 1.6s ease-in-out infinite;
    animation-delay: 1.2s;
}

/* ── Hero stage wheels ────────────────────────────────────────────────────── */
@keyframes hero-wheel-cw  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes hero-wheel-ccw { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
.hero-wheel--outer { animation: hero-wheel-cw 22s linear infinite; transform-origin: center; }
.hero-wheel--inner { animation: hero-wheel-ccw 16s linear infinite; transform-origin: center; }
[data-hero]:hover .hero-wheel--outer { animation-duration: 6s; color: var(--primary); }
[data-hero]:hover .hero-wheel--inner { animation-duration: 4s; }

/* Hero chips drift float */
@keyframes hero-chip-float {
    0%, 100% { transform: translate(var(--hero-chip-x), var(--hero-chip-y)); }
    50%      { transform: translate(var(--hero-chip-x), calc(var(--hero-chip-y) - 6px)); }
}
.hero-chip {
    animation: hero-chip-float 7s ease-in-out infinite;
}
.hero-chip--0 { animation-delay: 0s; }
.hero-chip--1 { animation-delay: 0.4s; }
.hero-chip--2 { animation-delay: 0.8s; }

/* ── Mono orbit (used in monogram.php) ───────────────────────────────────── */
@keyframes mono-orbit-cw  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes mono-orbit-ccw { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
[data-mono-orbit]         { animation: mono-orbit-cw 22s linear infinite; transform-origin: 0 0; transform-box: fill-box; }
[data-mono-orbit-counter] { animation: mono-orbit-ccw 38s linear infinite; transform-origin: 0 0; transform-box: fill-box; }
@keyframes mono-pulse {
    0%, 100% { opacity: 0; transform: scale(0.6); }
    50%      { opacity: 0.5; transform: scale(1.4); }
}
[data-mono-pulse] {
    animation: mono-pulse 4s ease-in-out infinite;
    animation-delay: 2s;
    transform-origin: center;
    transform-box: fill-box;
}
@keyframes mono-anchor-drift {
    0%, 100% { cy: -26; }
    50%      { cy: -28; }
}

/* ── WhyPanel ─────────────────────────────────────────────────────────────── */
@keyframes why-sweep {
    from { --sweep-angle: 0deg; }
    to   { --sweep-angle: 360deg; }
}
@property --sweep-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
.why-panel__sweep {
    animation: why-sweep 18s linear infinite;
}
@media (max-width: 767px) {
    .why-panel__sweep { animation: none; opacity: 0; }
}

.why-panel__ring-outer { animation: hero-wheel-cw 80s linear infinite; transform-origin: center; }
.why-panel__ring-inner { animation: hero-wheel-ccw 50s linear infinite; transform-origin: center; }
@media (max-width: 767px) {
    .why-panel__ring-outer,
    .why-panel__ring-inner { animation: none; }
}

@keyframes why-marker-pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.4); opacity: 1; }
}
.why-panel__marker-pulse {
    animation: why-marker-pulse 3.2s ease-in-out infinite;
}
.why-panel__marker:nth-child(1) .why-panel__marker-pulse { animation-delay: 1.2s; }
.why-panel__marker:nth-child(2) .why-panel__marker-pulse { animation-delay: 1.6s; }
.why-panel__marker:nth-child(3) .why-panel__marker-pulse { animation-delay: 2.0s; }
.why-panel__marker:nth-child(4) .why-panel__marker-pulse { animation-delay: 2.4s; }

@keyframes why-panel-mono-drift {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-6px) scale(1.02); }
}
.why-panel__monogram {
    animation: why-panel-mono-drift 7s ease-in-out infinite;
    animation-delay: 1.5s;
}
@keyframes why-panel-halo {
    0%, 100% { opacity: 0.6; transform: scale(0.95); }
    50%      { opacity: 1; transform: scale(1.05); }
}
.why-panel__halo {
    animation: why-panel-halo 5s ease-in-out infinite;
}

@keyframes why-panel-particle {
    0%   { opacity: 0; transform: translateY(0); }
    50%  { opacity: 0.8; }
    100% { opacity: 0; transform: translateY(-32px); }
}
.why-panel__particle {
    position: absolute;
    border-radius: 9999px;
    background: rgba(78,127,14,0.7);
    animation: why-panel-particle var(--dur, 6s) ease-in-out infinite;
    animation-delay: var(--d, 0s);
}

@keyframes why-panel-pip {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0; }
}
.why-panel__pip-ring {
    animation: why-panel-pip 1.8s ease-out infinite;
    transform-origin: center;
}

@keyframes why-eyebrow-ch {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.why-panel__eyebrow-ch {
    opacity: 0;
    animation: why-eyebrow-ch 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    animation-delay: var(--ec-delay, 0s);
}

.why-panel__divider {
    transform: scaleX(0);
    animation: why-divider 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s forwards;
}
@keyframes why-divider {
    to { transform: scaleX(1); }
}

/* ── Drift lines (ContactCTA) ─────────────────────────────────────────────── */
@keyframes drift-line {
    0%   { transform: translateX(var(--from)); }
    100% { transform: translateX(var(--to)); }
}
[data-drift-line] {
    animation: drift-line calc(var(--dur, 30) * 1s) ease-in-out infinite alternate;
}
[data-drift-line][data-drift-dir="1"]  { --from: -10%; --to:  10%; }
[data-drift-line][data-drift-dir="-1"] { --from:  10%; --to: -10%; }

/* ── Typewriter caret ─────────────────────────────────────────────────────── */
.typewriter-caret {
    display: inline-block;
    width: 2px;
    height: 0.95em;
    background: var(--primary);
    transform: translateY(2px);
    margin-left: 2px;
    animation: caret-blink 1s steps(1, end) infinite;
}

/* ── Mobile menu open state ───────────────────────────────────────────────── */
#mobile-menu.is-open                            { display: block; }
#mobile-menu.is-open [data-mobile-menu-panel]   { transform: translateX(0); }

/* ── Cookie banner / settings open states ────────────────────────────────── */
#cookie-banner.is-visible    { display: block; animation: cookie-slide-in 0.3s ease-out; }
#cookie-settings.is-visible  { display: flex; }
@keyframes cookie-slide-in {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Cookie toggle switch — pressed state */
.lr-switch[aria-pressed="true"]      { background-color: var(--primary); }
.lr-switch[aria-pressed="true"] span { transform: translateX(1rem); }

/* ── Mobile scroll marker visibility (overrides hidden when active) ──────── */
#mobile-scroll-marker.is-visible {
    display: flex !important;
    opacity: 0.9;
}

/* ── Sticky nav scrolled state ────────────────────────────────────────────── */
#site-nav[data-scrolled="true"] {
    background-color: var(--background);
    border-bottom-color: var(--border);
}
@media (min-width: 768px) {
    #site-nav[data-scrolled="true"] {
        background-color: color-mix(in srgb, var(--background) 85%, transparent);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
    }
}

/* ── Cursor spotlight (driven by JS via --mx/--my) ────────────────────────── */
.cursor-spotlight {
    --mx: -1000px;
    --my: -1000px;
}
[data-cursor-spotlight] .cursor-spotlight {
    background: radial-gradient(var(--cursor-size, 480px) circle at var(--mx) var(--my),
        var(--cursor-color, rgba(78,127,14,0.55)),
        transparent 65%);
    opacity: var(--cursor-opacity, 0.2);
}
@media (hover: none) {
    .cursor-spotlight { display: none; }
}

/* Caret blink (already exists in main.css via globals — repeated here for safety) */
@keyframes caret-blink-fb {
    0%, 49%   { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Approach item — hover-driven number fill (keep clip-path animatable) */
@property --clip {
    syntax: "<length-percentage>";
    initial-value: 100%;
    inherits: false;
}