/* ════════════════════════════════════════════════════════════════
   JVenix — component styles & animation ports (Framer Motion → CSS)
   Loaded AFTER main.css (compiled Tailwind v4)
   ════════════════════════════════════════════════════════════════ */

/* ── LoadingScreen ─────────────────────────────────────────────── */
#loading-screen { transition: opacity 0.5s ease-in-out; }
#loading-screen.ls-hide { opacity: 0; pointer-events: none; }

.ls-inner { animation: ls-inner 0.5s ease-out forwards; }
@keyframes ls-inner {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ls-bar { transform: scaleX(0); animation: ls-bar 1.2s ease-in-out 0.3s forwards; }
@keyframes ls-bar { to { transform: scaleX(1); } }

.ls-track { opacity: 0; animation: ls-show 0.01s linear 0.6s forwards; }
.ls-caption { opacity: 0; animation: ls-cap 0.01s linear 0.8s forwards; }
@keyframes ls-show { to { opacity: 1; } }
@keyframes ls-cap { to { opacity: 0.5; } }

.ls-progress { animation: ls-progress 1s ease-in-out infinite; }
@keyframes ls-progress {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ── Navigation ────────────────────────────────────────────────── */
.site-header { animation: hdr-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes hdr-in {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

#site-header.scrolled.dark-under {
    background: rgba(26, 26, 26, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(0, 0, 0, 0.35);
}
#site-header.scrolled:not(.dark-under) {
    background: rgba(245, 245, 240, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 20px rgba(26, 26, 26, 0.06);
}

.site-nav-link { color: rgba(26, 26, 26, 0.7); }
.site-nav-link:hover { color: #1A1A1A; }
.dark-under .site-nav-link { color: rgba(255, 255, 255, 0.7); }
.dark-under .site-nav-link:hover { color: #ffffff; }
.site-nav-link.active { color: #FF6B2B !important; }

.nav-dropdown {
    opacity: 0;
    transform: translateY(10px);
    scale: 0.97;
    pointer-events: none;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, scale 0.2s ease-out;
}
.nav-wrap:hover .nav-dropdown {
    opacity: 1;
    transform: translateY(0);
    scale: 1;
    pointer-events: auto;
}
.nav-wrap:hover .nav-chevron { rotate: 180deg; }
.nav-chevron { transition: transform 0.3s; }

.nav-dd-item { opacity: 0; transform: translateX(-8px); transition: opacity 0.2s ease-out, transform 0.2s ease-out; }
.nav-wrap:hover .nav-dd-item { opacity: 1; transform: translateX(0); }
.nav-dd-item:nth-child(1) { transition-delay: 0.00s; }
.nav-dd-item:nth-child(2) { transition-delay: 0.04s; }
.nav-dd-item:nth-child(3) { transition-delay: 0.08s; }
.nav-dd-item:nth-child(4) { transition-delay: 0.12s; }
.nav-dd-item:nth-child(5) { transition-delay: 0.16s; }
.nav-dd-item:nth-child(6) { transition-delay: 0.20s; }

.dd-link { color: rgba(26, 26, 26, 0.7); }
.dd-link:hover { background: #F5F5F0; color: #1A1A1A; }
.dd-link.active { background: rgba(255, 107, 43, 0.08); color: #FF6B2B; }

/* Mobile toggle icons */
#mobile-toggle .mt-icon { display: inline-flex; }
#mobile-toggle .mt-icon.hidden { display: none; }
.mt-icon.swap-in { animation: mt-in 0.2s ease-out; }
@keyframes mt-in { from { opacity: 0; transform: rotate(-90deg); } to { opacity: 1; transform: rotate(0deg); } }

/* ── Mobile fullscreen menu ────────────────────────────────────── */
#mobile-menu { display: none; opacity: 0; transition: opacity 0.3s; }
#mobile-menu.open { display: flex; flex-direction: column; opacity: 1; }
#mobile-menu.closing { opacity: 0; }

#mobile-menu.open .mm-item { animation: mm-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0s); }
@keyframes mm-in {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.mm-label { color: rgba(255, 255, 255, 0.8); }
.mm-label:hover { color: #ffffff; }
.mm-label.active { color: #FF6B2B; }

.mm-sub {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.mm-sub.open { grid-template-rows: 1fr; opacity: 1; }
.mm-sub > div { overflow: hidden; min-height: 0; }
#mobile-menu.open .mm-sub:not(.open) .mm-sub-item { opacity: 0; }
.mm-sub.open .mm-sub-item { animation: mm-sub-in 0.3s ease-out both; animation-delay: var(--d, 0s); }
@keyframes mm-sub-in {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.mm-sub-link { color: rgba(255, 255, 255, 0.5); }
.mm-sub-link:hover { color: #ffffff; }
.mm-sub-link.active { color: #FF6B2B; }

#mobile-menu.open .mm-cta { animation: mm-cta 0.4s ease-out 0.6s both; }
@keyframes mm-cta {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Gradient brand text — robust fallback so "JVenix" is always visible */
.jv-gradient-text {
    color: #FF6B2B;
    background-image: linear-gradient(90deg, #FF6B2B 0%, #E55A1B 50%, #FF8F5E 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .jv-gradient-text { -webkit-text-fill-color: #FF6B2B; color: #FF6B2B; background: none; }
}

/* ── Hero ──────────────────────────────────────────────────────── */
.he-in {
    opacity: 0;
    transform: translateY(var(--hd-y, 40px));
    animation: he-in var(--hd-dur, 0.7s) ease-out var(--hd-delay, 0s) forwards;
    animation-play-state: paused;
}
body.loaded .he-in { animation-play-state: running; }
@keyframes he-in { to { opacity: 1; transform: translateY(0); } }

.float-shape { animation: fs-float var(--fs-dur, 6s) ease-in-out var(--fs-delay, 0s) infinite; animation-play-state: paused; }
body.loaded .float-shape { animation-play-state: running; }
@keyframes fs-float {
    0%, 100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
    50%      { transform: translateY(calc(-20px * var(--fs-speed, 1))) rotateX(15deg) rotateY(15deg); }
}

.orb-chip { opacity: 0; transform: scale(0.8); animation: orb-in 0.5s ease-out var(--oi-delay, 0s) forwards; animation-play-state: paused; }
body.loaded .orb-chip { animation-play-state: running; }
@keyframes orb-in { to { opacity: 1; transform: scale(1); } }

.scroll-bob { animation: sb 2s ease-in-out infinite; animation-play-state: paused; }
body.loaded .scroll-bob { animation-play-state: running; }
@keyframes sb { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.scroll-dot { animation: sdot 2s ease-in-out infinite; animation-play-state: paused; }
body.loaded .scroll-dot { animation-play-state: running; }
@keyframes sdot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@keyframes float-particle {
    0%   { transform: translateY(0) translateX(0); opacity: 0.3; }
    100% { transform: translateY(-40px) translateX(15px); opacity: 0.8; }
}
@keyframes glow-pulse {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50%      { opacity: 0.7; transform: scale(1.05); }
}
@keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes counter-orbit { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
@keyframes orbit3d-1 { 0% { transform: rotateX(70deg) rotateZ(0deg); } 100% { transform: rotateX(70deg) rotateZ(360deg); } }
@keyframes orbit3d-2 { 0% { transform: rotateX(60deg) rotateY(20deg) rotateZ(0deg); } 100% { transform: rotateX(60deg) rotateY(20deg) rotateZ(360deg); } }
@keyframes orbit3d-3 { 0% { transform: rotateX(75deg) rotateY(-15deg) rotateZ(0deg); } 100% { transform: rotateX(75deg) rotateY(-15deg) rotateZ(360deg); } }

/* ── Scroll reveal system (whileInView port) ───────────────────── */
[data-reveal-group] .rv,
.rv-group .rv {
    opacity: 0;
    transform: translateY(var(--rv-y, 30px)) translateX(var(--rv-x, 0px)) scale(var(--rv-s, 1));
    transition:
        opacity var(--rv-dur, 0.5s) ease-out var(--rv-delay, 0s),
        transform var(--rv-dur, 0.5s) ease-out var(--rv-delay, 0s);
    will-change: opacity, transform;
}
[data-reveal-group].rv-in .rv,
.rv-group.rv-in .rv { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    [data-reveal-group] .rv { opacity: 1; transform: none; }
}

/* Individual per-element reveals (about/story/etc — RevealBlock port) */
.rvi {
    opacity: 0;
    transform: translate(var(--x, 0px), var(--y, 60px)) scale(var(--s, 1));
    transition:
        opacity var(--rdur, 0.8s) cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
        transform var(--rdur, 0.8s) cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s);
}
.rvi.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rvi { opacity: 1; transform: none; } }

/* About page hero */
.about-hero-title { animation: about-title-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; }
body.loaded .about-hero-title { animation-play-state: running; }
@keyframes about-title-in {
    from { opacity: 0; transform: scale(0.8) rotateX(15deg); }
    to   { opacity: 1; transform: scale(1) rotateX(0deg); }
}
.about-hero-sub { animation: about-sub-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both; animation-play-state: paused; }
body.loaded .about-hero-sub { animation-play-state: running; }
@keyframes about-sub-in {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.about-cube { animation: ab-cube 4s ease-in-out infinite; animation-play-state: paused; }
body.loaded .about-cube { animation-play-state: running; }
@keyframes ab-cube {
    0%, 100% { transform: translateY(0) rotateZ(0deg); }
    33%      { transform: translateY(-5px) rotateZ(3deg); }
    50%      { transform: translateY(-10px) rotateZ(1.5deg); }
    66%      { transform: translateY(-5px) rotateZ(-3deg); }
}
.about-hero-line-wrap { animation: ah-line 1s ease-out 1.2s both; animation-play-state: paused; }
body.loaded .about-hero-line-wrap { animation-play-state: running; }
@keyframes ah-line { from { opacity: 0; } to { opacity: 1; } }
.about-line { animation: ab-bounce 2s ease-in-out infinite; animation-play-state: paused; }
body.loaded .about-line { animation-play-state: running; }
@keyframes ab-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }

/* Story page hero entrance */
.story-title { animation: st-title-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; }
body.loaded .story-title { animation-play-state: running; }
@keyframes st-title-in {
    from { opacity: 0; transform: scale(0.6) translateY(40px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.st-fade {
    opacity: 0;
    animation: st-fade-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--sd, 1s) both;
    animation-play-state: paused;
}
body.loaded .st-fade { animation-play-state: running; }
@keyframes st-fade-in {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.st-scroll-wrap { animation: ah-line 1s ease-out 2.2s both; animation-play-state: paused; }
body.loaded .st-scroll-wrap { animation-play-state: running; }
.st-bounce { animation: ab-bounce 2.5s ease-in-out infinite; animation-play-state: paused; }
body.loaded .st-bounce { animation-play-state: running; }

/* Story timeline sections (per-section observer) */
[data-st-group] .rv-st {
    opacity: 0;
    transform: translateX(var(--sx, -100px));
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) var(--sd, 0s),
        transform 1s cubic-bezier(0.22, 1, 0.36, 1) var(--sd, 0s);
}
[data-st-group] .rv-line {
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--ldd, 0.3s);
}
[data-st-group] .rv-bottomline {
    transform: scaleX(0);
    transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1) var(--bld, 0.5s);
}
[data-st-group].rv-in .rv-st,
[data-st-group].rv-in .rv-line,
[data-st-group].rv-in .rv-bottomline { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-st-group] .rv-st, [data-st-group] .rv-line, [data-st-group] .rv-bottomline {
        opacity: 1; transform: none;
    }
}

/* Services page hero cube */
.sv-cube { animation: sv-cube 4s ease-in-out infinite; animation-play-state: paused; }
body.loaded .sv-cube { animation-play-state: running; }
@keyframes sv-cube {
    0%, 100% { transform: translateY(0) rotateZ(0deg); }
    33%      { transform: translateY(-6px) rotateZ(5deg); }
    50%      { transform: translateY(-12px) rotateZ(2.5deg); }
    66%      { transform: translateY(-6px) rotateZ(-5deg); }
}

/* Services detail modal (AnimatePresence port) */
.svc-overlay {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    padding: 1rem;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.svc-overlay.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.svc-overlay .svc-panel {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-overlay.open .svc-panel { opacity: 1; transform: translateY(0) scale(1); }

/* Courses page */
@keyframes co-sub-in {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.co-stats { animation: co-stats-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) var(--cd, 0.8s) both; animation-play-state: paused; }
body.loaded .co-stats { animation-play-state: running; }
@keyframes co-stats-in {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cl-card { transition: box-shadow 0.5s ease, transform 0.3s cubic-bezier(0, 0, 0.58, 1); }
.cl-card:hover { transform: translateY(-8px); }

/* FAQ accordion (height auto port via grid-rows) */
.faq-a-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-a-wrap > div { overflow: hidden; }
.faq-item.open .faq-a-wrap { grid-template-rows: 1fr; opacity: 1; }
.faq-plus { transition: transform 0.3s ease; }
.faq-item.open .faq-plus { transform: rotate(45deg); }

/* Ebooks page */
.ebk-letter {
    display: inline-block;
    animation: ebk-letter-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--eld, 1s) both;
    animation-play-state: paused;
}
body.loaded .ebk-letter { animation-play-state: running; }
@keyframes ebk-letter-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ebk-hero-book { animation: ebk-book-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; }
body.loaded .ebk-hero-book { animation-play-state: running; }
@keyframes ebk-book-in {
    from { opacity: 0; transform: rotateY(-90deg) scale(0.7); }
    to   { opacity: 1; transform: rotateY(-15deg) scale(1); }
}
.ebk-sub { animation: co-sub-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 2s both; animation-play-state: paused; }
body.loaded .ebk-sub { animation-play-state: running; }
.ebk-float { animation: ebk-float 5s ease-in-out infinite; }
@keyframes ebk-float {
    0%, 100% { transform: translateY(0) rotateY(0deg); }
    33%      { transform: translateY(-7px) rotateY(10deg); }
    50%      { transform: translateY(-15px) rotateY(5deg); }
    66%      { transform: translateY(-7px) rotateY(-10deg); }
}
.ebk-side-text {
    animation: ebk-side-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
    animation-play-state: paused;
}
body.loaded .ebk-side-text { animation-play-state: running; }
@keyframes ebk-side-in {
    from { opacity: 0; transform: translateY(-50%) rotate(-90deg) translateX(-30px); }
    to   { opacity: 1; transform: translateY(-50%) rotate(-90deg) translateX(0); }
}
.ebk-card3d {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    animation: bk-circular 5s ease-in-out infinite;
}
.ebk-card3d:hover {
    animation: none;
    transform: rotateY(-12deg) rotateX(5deg) scale(1.05);
}
@keyframes bk-circular {
    0%, 100% { transform: rotateY(0deg) rotateX(0deg); }
    25%      { transform: rotateY(6deg) rotateX(4deg); }
    50%      { transform: rotateY(0deg) rotateX(0deg); }
    75%      { transform: rotateY(-6deg) rotateX(-3deg); }
}

/* Dark ebook modals (bg-black/70, y20/scale.9/.3s panel) */
.svc-overlay.ebk-dark { background: rgba(0, 0, 0, 0.7); }
.svc-overlay.ebk-dark .svc-panel {
    transition-duration: 0.3s;
    transform: translateY(20px) scale(0.9);
}

/* Success toast */
.ebk-toast-in { opacity: 0; transform: translate(-50%, 50px); transition: all 0.3s ease; }
@media (prefers-reduced-motion: no-preference) {
    .ebk-toast-in.show { opacity: 1; transform: translate(-50%, 0); }
}

/* Books page */
.bk-title { animation: bk-title-in 1.2s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; }
body.loaded .bk-title { animation-play-state: running; }
@keyframes bk-title-in {
    from { opacity: 0; transform: scale(0.85) translateY(40px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.bk-sub { animation: co-sub-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both; animation-play-state: paused; }
body.loaded .bk-sub { animation-play-state: running; }

/* Certificates page (submitted result + verified badge entrances) */
.cert-reveal { opacity: 0; transform: translateY(50px) scale(0.95); transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.cert-reveal.show { opacity: 1; transform: none; }
.cert-badge { opacity: 0; transform: scale(0.8); transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.cert-badge.show { opacity: 1; transform: scale(1); }

/* Reviews page (mount entrances + card lift) */
@keyframes rv-fade-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: none; }
}
.rv-hero { animation: rv-fade-up 0.7s ease-out both; animation-play-state: paused; }
body.loaded .rv-hero { animation-play-state: running; }
.rv-hero-2 { animation: rv-fade-up 0.6s ease-out both; animation-play-state: paused; }
body.loaded .rv-hero-2 { animation-play-state: running; }
[data-reveal-group].rv-in .rv.rv-hov:hover,
.rv.rv-hov:hover { transform: translateY(-4px); }

/* Other page cards (spring hover port) */
.oth-card {
    transition:
        transform 0.35s cubic-bezier(0.34, 1.3, 0.64, 1),
        box-shadow 0.35s ease;
}
.oth-card:hover {
    transform: translateY(-8px) rotateX(2deg) rotateY(-2deg);
    box-shadow: 0 20px 40px rgba(255, 107, 43, 0.15), 0 0 0 2px #FF6B2B;
}

/* Blog cards hover (JS-free port of hoveredId state) */
.blog-card:hover {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-4px);
}

/* Masterclass countdown digit pop */
.mc-num { display: inline-block; }
.mc-pop { animation: mc-pop-in 0.3s ease-out; }
@keyframes mc-pop-in {
    from { transform: translateY(-10px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* Standalone reveal (footer) */
[data-reveal] { opacity: 0; transform: translateY(var(--ry, 30px)); transition: opacity 0.6s ease-out var(--rd, 0s), transform 0.6s ease-out var(--rd, 0s); }
[data-reveal="fade"] { transform: none; }
[data-reveal].reveal-in { opacity: 1; transform: none; }
[data-reveal-y="30"] { --ry: 30px; }
[data-reveal-y="40"] { --ry: 40px; }
[data-reveal-delay="0.1"] { --rd: 0.1s; }
[data-reveal-delay="0.3"] { --rd: 0.3s; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; } }

/* Countdown flip (MasterClassPreview) */
.cd-flip.cd-tick { animation: cdtick 0.3s ease-out; }
@keyframes cdtick {
    from { transform: rotateX(-90deg); opacity: 0; }
    to   { transform: rotateX(0); opacity: 1; }
}

/* ── Footer hover states (ported from React inline handlers) ───── */
.nl-input:focus { border-color: #FF6B2B !important; }
.nl-btn:hover { background-color: #e55a1f !important; transform: scale(1.03) !important; }

.footer-social {
    color: rgba(245, 245, 240, 0.45);
    transition: color 0.3s, transform 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.footer-social:hover { color: #FF6B2B; transform: translateY(-2px); }

.footer-link {
    color: rgba(245, 245, 240, 0.55);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.3s, padding-left 0.3s;
    display: inline-block;
    line-height: 1.8;
}
.footer-link:hover { color: #FF6B2B; padding-left: 6px; }

.footer-contact-link {
    color: rgba(245, 245, 240, 0.65);
    text-decoration: none;
    font-size: 0.88rem;
    transition: color 0.3s;
}
.footer-contact-link:hover { color: #FF6B2B; }

.footer-policy {
    color: rgba(245, 245, 240, 0.4);
    text-decoration: none;
    font-size: 0.78rem;
    transition: color 0.3s;
    white-space: nowrap;
}
.footer-policy:hover { color: #FF6B2B; }

/* Footer grid responsive (from Footer.tsx <style jsx global>) */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
    .footer-grid { grid-template-columns: 1fr !important; }
}

/* Hidden helper (native hidden attr fallback parity with React conditional rendering) */
.hidden { display: none; }

/* ── Contact page (ContactPage.tsx) ─────────────────────────────── */
@keyframes ct-hero-fadein { from { opacity: 0; } to { opacity: 1; } }
.ct-hero-in { opacity: 0; animation: ct-hero-fadein 0.5s ease-out forwards; animation-play-state: paused; }
body.loaded .ct-hero-in { animation-play-state: running; }

@keyframes ct-visual-in {
    0%   { transform: scale(0) rotate(-180deg); }
    55%  { transform: scale(1.12) rotate(8deg); }
    75%  { transform: scale(0.96) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
}
.ct-visual { animation: ct-visual-in 0.8s cubic-bezier(0.3, 0.9, 0.4, 1) both; animation-play-state: paused; }
body.loaded .ct-visual { animation-play-state: running; }

@keyframes ct-float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.ct-float { animation: ct-float-y 3s ease-in-out infinite; animation-play-state: paused; }
body.loaded .ct-float { animation-play-state: running; }

@keyframes ct-char-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ct-char { opacity: 0; animation: ct-char-in 0.4s cubic-bezier(0, 0, 0.58, 1) forwards; }

@keyframes ct-fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ct-fade-up { opacity: 0; animation: ct-fade-up 0.6s cubic-bezier(0, 0, 0.58, 1) forwards; }
.ct-fade-up-fast { animation: ct-fade-up 0.3s ease-out both; }
@keyframes ct-fadein-soft { from { opacity: 0; } to { opacity: 1; } }
.ct-fadein { animation: ct-fadein-soft 0.4s ease-out both; }

/* Wizard steps — AnimatePresence mode="wait" port (x:40 in / x:-40 out, .3s) */
.ct-step { display: none; }
.ct-step.active { display: block; animation: ct-step-in 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
.ct-step.active.ct-exit { animation: ct-step-out 0.3s ease-in both; }
@keyframes ct-step-in {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ct-step-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(-40px); }
}

/* Shared field styles (@apply-equivalent of repeated Tailwind strings) */
.ct-label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: #1a1a1a; margin-bottom: 0.25rem; }
.ct-inp {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #ffffff;
    border: 1px solid rgba(26, 26, 26, 0.15);
    border-radius: 0.75rem;
    transition: all 0.15s ease;
}
.ct-inp:focus { outline: none; box-shadow: 0 0 0 2px #FF6B2B; }
.ct-inp-err { border-color: #ef4444 !important; }
textarea.ct-inp { resize: none; }

/* Success pop-in */
@keyframes ct-pop-in {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
.ct-pop-in { animation: ct-pop-in 0.35s ease-out both; }

/* Single scrollbar fix — keep only the page scrollbar, never a body one.
   overflow-x: hidden on body forces overflow-y to auto, which turns <body>
   into its own scroll container next to the page scrollbar (two scrollbars). */
html { overflow-x: hidden; }
html body { overflow-x: clip; }