/* ────────────────────────────────────────────────────────────────────────────
   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;
}

/* ────────────────────────────────────────────────────────────────────────────
   Tailwind utility gap-fillers — classes the Lonerock theme uses that the
   Next.js source did NOT use, so Tailwind v4 JIT never emitted them.
   ──────────────────────────────────────────────────────────────────────────── */

.scale-y-0   { transform: scaleY(0); }
.scale-y-50  { transform: scaleY(0.5); }
.scale-y-100 { transform: scaleY(1); }
.scale-x-0   { transform: scaleX(0); }
.scale-x-100 { transform: scaleX(1); }

/* Translate utilities the JIT did not emit */
.translate-x-1\.5   { transform: translateX(0.375rem); }
.-translate-x-1\.5  { transform: translateX(-0.375rem); }
.translate-y-1      { transform: translateY(0.25rem); }
.translate-x-4      { transform: translateX(1rem); }
.translate-x-full   { transform: translateX(100%); }
.-translate-x-\[101\%\] { transform: translateX(-101%); }

/* Positioning utilities the JIT did not emit */
.left-0\.5  { left: 0.125rem; }
.top-0\.5   { top: 0.125rem; }
.z-\[60\]   { z-index: 60; }

/* Shadows */
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); }

/* Misc transitions / durations the JIT did not emit */
.duration-\[450ms\] { transition-duration: 450ms; }
.duration-\[550ms\] { transition-duration: 550ms; }
.duration-\[600ms\] { transition-duration: 600ms; }
.transition-\[clip-path\] { transition-property: clip-path; }
.transition-\[height\]    { transition-property: height; }

/* Spacing the JIT did not emit */
@media (min-width: 768px) {
    .md\:space-y-16 > :not(:last-child) { margin-block-start: 4rem; }
}

.group:hover .group-hover\:scale-x-0    { transform: scaleX(0); }
.group:hover .group-hover\:scale-y-0    { transform: scaleY(0); }
.group:hover .group-hover\:scale-x-100  { transform: scaleX(1); }
.group:hover .group-hover\:scale-y-100  { transform: scaleY(1); }
.group:hover .group-hover\:scale-100    { transform: scale(1); }
.group:hover .group-hover\:scale-125    { transform: scale(1.25); }
.group:hover .group-hover\:border-primary { border-color: var(--primary); }
.group:hover .group-hover\:bg-primary     { background-color: var(--primary); }
.group:hover .group-hover\:text-background{ color: var(--background); }
.group:hover .group-hover\:translate-x-1\.5  { transform: translateX(0.375rem); }
.group:hover .group-hover\:-translate-x-1\.5 { transform: translateX(-0.375rem); }
.group:hover .group-hover\:translate-y-0     { transform: translateY(0); }
.group:hover .group-hover\:-translate-y-1    { transform: translateY(-0.25rem); }
.group:hover .group-hover\:translate-x-1     { transform: translateX(0.25rem); }
.group:hover .group-hover\:translate-x-0     { transform: translateX(0); }
.group:hover .group-hover\:h-\[2px\]      { height: 2px; }
.group:hover .group-hover\:w-7            { width: 1.75rem; }
.group:hover .group-hover\:w-14           { width: 3.5rem; }
.group:hover .group-hover\:w-24           { width: 6rem; }
.group:hover .group-hover\:\[clip-path\:inset\(0\%_0\%_0\%_0\%\)\] { clip-path: inset(0% 0% 0% 0%); }

/* ────────────────────────────────────────────────────────────────────────────
   ValueCard — CAD perimeter that draws in on hover. Hardcoded so it does
   not depend on Tailwind scale variants the JIT may have skipped.
   ──────────────────────────────────────────────────────────────────────────── */
.value-card .value-card__edge--t { transform: scaleX(0); transform-origin: left center;  }
.value-card .value-card__edge--r { transform: scaleY(0); transform-origin: center top;   }
.value-card .value-card__edge--b { transform: scaleX(0); transform-origin: right center; }
.value-card .value-card__edge--l { transform: scaleY(0); transform-origin: center bottom;}

.value-card:hover .value-card__edge--t { transform: scaleX(1); }
.value-card:hover .value-card__edge--r { transform: scaleY(1); transition-delay: 0.1s; }
.value-card:hover .value-card__edge--b { transform: scaleX(1); transition-delay: 0.2s; }
.value-card:hover .value-card__edge--l { transform: scaleY(1); transition-delay: 0.3s; }

.value-card .value-card__tab { transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
.value-card:hover .value-card__tab { height: calc(100% - 64px) !important; }

.value-card .value-card__underline { transform: scaleX(0); }
.value-card:hover .value-card__underline { transform: scaleX(1); }

/* SpecRow — green left bar grows on hover */
.spec-row .spec-row__bar { transform: scaleY(0); }
.spec-row:hover .spec-row__bar { transform: scaleY(1); }

/* WhyRow — green left bar grows on hover */
.why-row .why-row__bar { transform: scaleY(0); }
.why-row:hover .why-row__bar { transform: scaleY(1); }

/* ApproachItem — hover bar growth (transforms on the flex-1 hairline) */
.approach-item .approach-item__hairline { transform: scaleX(0); }
.approach-item:hover .approach-item__hairline { transform: scaleX(1); }

/* ApproachItem — number fill clip-path overrides inline style */
.approach-item .approach-item__num-fill {
    transition: clip-path 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.approach-item:hover .approach-item__num-fill {
    clip-path: inset(0% 0% 0% 0%) !important;
}

/* ────────────────────────────────────────────────────────────────────────────
   ManifestEntry — hover-state rules that need to override inline styles set
   on idle (height/width). Uses !important to outrank `style="..."`.
   ──────────────────────────────────────────────────────────────────────────── */
.manifest-entry .manifest-entry__tab {
    transition: height 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.manifest-entry:hover .manifest-entry__tab {
    height: calc(100% - 96px) !important;
}
.manifest-entry .manifest-entry__meta-line {
    transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.manifest-entry:hover .manifest-entry__meta-line {
    width: 56px !important;
    background-color: var(--primary);
}
.manifest-entry .manifest-entry__num {
    transition: transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
                letter-spacing 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.manifest-entry:hover .manifest-entry__num {
    letter-spacing: -0.02em;
}
.manifest-entry .manifest-entry__caliper-bar {
    transform: scaleX(0);
    opacity: 0;
}
.manifest-entry:hover .manifest-entry__caliper-bar {
    transform: scaleX(1);
    opacity: 1;
}
.manifest-entry .manifest-entry__caliper-tick-l,
.manifest-entry .manifest-entry__caliper-tick-r {
    opacity: 0;
    transform: scaleY(0.5);
}
.manifest-entry:hover .manifest-entry__caliper-tick-l,
.manifest-entry:hover .manifest-entry__caliper-tick-r {
    opacity: 1;
    transform: scaleY(1);
}
.manifest-entry .manifest-entry__bracket {
    opacity: 0;
    transform: scaleY(0);
}
.manifest-entry:hover .manifest-entry__bracket {
    opacity: 1;
    transform: scaleY(1);
}

/* Contact field — kinetic underline on focus */
.contact-field .contact-field__underline { transform: scaleX(0); }
.contact-field:focus-within .contact-field__underline { transform: scaleX(1); }

/* ValueCard crosshair — idle short tick, hover full + green tint */
.value-card .value-card__crosshair line {
    transition: stroke-dasharray 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                stroke 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.value-card:hover .value-card__crosshair line {
    stroke-dasharray: 1 1;
    stroke: var(--primary);
}
.value-card .value-card__crosshair circle {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                stroke 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: 12px 12px;
    transform-box: fill-box;
}
.value-card:hover .value-card__crosshair circle {
    transform: scale(1.3);
    stroke: var(--primary);
}