/* ═══════════════════════════════════════════════════════════
   FoodLab AI — Shared Visual Enhancement Layer
   Applied to all pages via <link href="css/enhancements.css">
   ═══════════════════════════════════════════════════════════ */

/* ── Extra tokens ── */
:root {
    --glow-cyan:   0 0 60px rgba(31,157,203,0.26), 0 0 120px rgba(31,157,203,0.10);
    --glow-accent: 0 0 60px rgba(251,178,43,0.26),  0 0 120px rgba(251,178,43,0.09);
    --gradient-text-hero:   linear-gradient(135deg, #001430 0%, #1f9dcb 60%, #0d5f8c 100%);
    --gradient-text-accent: linear-gradient(120deg, #fbb22b 0%, #f5830a 100%);
}

/* ════════════════════════════════════════
   BODY / PAGE BASE
   ════════════════════════════════════════ */
body {
    background: #f7f9fc;
}

/* ════════════════════════════════════════
   PAGE HERO — Aurora background
   ════════════════════════════════════════ */
.page-hero {
    position: relative;
    overflow: hidden;
    background: transparent;
}

/* Molecular dot grid */
.page-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(0,20,48,0.05) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
    mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, rgba(0,0,0,0.45) 0%, transparent 100%);
}

/* Aurora orb 1 */
.page-hero::after {
    content: "";
    position: absolute;
    width: 30rem; height: 30rem;
    left: -6rem; top: -4rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31,157,203,0.14) 0%, transparent 70%);
    filter: blur(72px);
    pointer-events: none;
    z-index: 0;
    animation: aurora-drift1 20s ease-in-out infinite;
}

@keyframes aurora-drift1 {
    0%   { transform: translate(0,0) scale(1); }
    40%  { transform: translate(3rem,2rem) scale(1.08); }
    70%  { transform: translate(-2rem,4rem) scale(0.94); }
    100% { transform: translate(0,0) scale(1); }
}

/* Second aurora orb via a wrapper pseudo — injected via JS */
.page-hero-aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.page-hero-aurora__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}

.page-hero-aurora__orb--1 {
    width: 32rem; height: 32rem;
    right: -6rem; top: -2rem;
    background: radial-gradient(circle, rgba(0,20,48,0.08) 0%, transparent 70%);
    animation: aurora-drift2 26s ease-in-out infinite;
}
.page-hero-aurora__orb--2 {
    width: 20rem; height: 20rem;
    left: 40%; bottom: -2rem;
    background: radial-gradient(circle, rgba(251,178,43,0.10) 0%, transparent 70%);
    animation: aurora-drift3 18s ease-in-out infinite;
}

@keyframes aurora-drift2 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(-4rem,3rem) scale(1.1); }
    100% { transform: translate(0,0) scale(1); }
}
@keyframes aurora-drift3 {
    0%   { transform: translate(0,0) scale(1); }
    50%  { transform: translate(3rem,-3rem) scale(1.08); }
    100% { transform: translate(0,0) scale(1); }
}

.page-hero .site-shell,
.page-hero > .site-shell {
    position: relative;
    z-index: 1;
}

/* ════════════════════════════════════════
   PAGE TITLE — Gradient text
   ════════════════════════════════════════ */
.page-title {
    background: var(--gradient-text-hero);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.04em;
    line-height: 0.98;
}

.section-heading {
    letter-spacing: -0.03em;
}

/* ════════════════════════════════════════
   SCROLL REVEAL
   ════════════════════════════════════════ */
/* base.css sets opacity:0 on .reveal-init — we must override for section-level containers */
section.reveal-init,
header.reveal-init,
main.reveal-init,
nav.reveal-init,
footer.reveal-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.reveal-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* ════════════════════════════════════════
   FEATURE CARDS
   ════════════════════════════════════════ */
.feature-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1),
                box-shadow 0.28s ease,
                border-color 0.28s ease;
}

.feature-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-secondary), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-card:hover::before { opacity: 1; }

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 60px rgba(31,157,203,0.12), 0 8px 24px rgba(0,20,48,0.06);
    border-color: rgba(31,157,203,0.14);
}

.feature-card:hover .feature-card__icon {
    background: linear-gradient(145deg, rgba(31,157,203,0.22) 0%, rgba(31,157,203,0.10) 100%);
    transform: translateY(-2px) scale(1.08);
    box-shadow: 0 8px 20px rgba(31,157,203,0.22);
}

/* ════════════════════════════════════════
   PAGE CARDS
   ════════════════════════════════════════ */
.page-card {
    transition: transform 0.25s cubic-bezier(0.2,0.8,0.2,1),
                box-shadow 0.25s ease,
                border-color 0.25s ease;
}

.page-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(0,20,48,0.10);
    border-color: rgba(31,157,203,0.14);
}

.page-card--highlight {
    background: linear-gradient(145deg, rgba(31,157,203,0.09) 0%, rgba(255,255,255,0.98) 100%);
    border: 1px solid rgba(31,157,203,0.12);
}

.page-card--accent {
    background: linear-gradient(145deg, rgba(251,178,43,0.14) 0%, rgba(255,255,255,0.98) 100%);
    border: 1px solid rgba(251,178,43,0.24);
}

/* ════════════════════════════════════════
   DETAIL CARDS
   ════════════════════════════════════════ */
.detail-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.detail-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,20,48,0.09);
    border-color: rgba(31,157,203,0.12);
}

/* ════════════════════════════════════════
   CONTACT CARDS
   ════════════════════════════════════════ */
.contact-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px rgba(0,20,48,0.10);
}

/* ════════════════════════════════════════
   PAGE STAGE
   ════════════════════════════════════════ */
.page-stage {
    border: 1px solid rgba(31,157,203,0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.94) 0%, rgba(241,248,253,0.96) 100%);
    box-shadow: 0 28px 72px rgba(0,20,48,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
    transition: box-shadow 0.4s ease, transform 0.3s ease;
}

.page-stage:hover {
    box-shadow: 0 36px 90px rgba(0,20,48,0.14),
                0 0 0 1px rgba(31,157,203,0.16),
                inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ════════════════════════════════════════
   PAGE MINI STATS
   ════════════════════════════════════════ */
.page-mini-stat {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.page-mini-stat:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(31,157,203,0.12);
    border-color: rgba(31,157,203,0.14);
}

.page-mini-stat__value {
    background: linear-gradient(135deg, #001430 0%, #1f9dcb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ════════════════════════════════════════
   PAGE LIST ICONS
   ════════════════════════════════════════ */
.page-list .material-symbols-outlined {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.page-list li:hover .material-symbols-outlined {
    transform: scale(1.12);
    background: rgba(31,157,203,0.18);
}

/* ════════════════════════════════════════
   CTA PANEL
   ════════════════════════════════════════ */
.cta-panel {
    background:
        radial-gradient(circle at 5% 90%, rgba(251,178,43,0.16), transparent 20rem),
        radial-gradient(circle at 95% 10%, rgba(31,157,203,0.26), transparent 22rem),
        linear-gradient(140deg, #001430 0%, #002855 55%, #0d5f8c 100%);
    overflow: hidden;
}

.cta-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.035) 50%, transparent 70%);
    animation: cta-shimmer 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes cta-shimmer {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

.cta-panel > * { position: relative; z-index: 1; }

/* ════════════════════════════════════════
   SECTION MUTED — dot pattern
   ════════════════════════════════════════ */
.page-section--muted,
.home-section--muted {
    position: relative;
}

.page-section--muted::after,
.home-section--muted::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(31,157,203,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.5) 70%, transparent 100%);
}

.page-section--muted > *,
.home-section--muted > * {
    position: relative;
    z-index: 1;
}

/* ════════════════════════════════════════
   BUTTONS — enhanced shimmer
   ════════════════════════════════════════ */
.button--primary {
    overflow: hidden;
}

.button--primary::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 36%, rgba(255,255,255,0.16) 52%, transparent 68%);
    transform: translateX(-100%);
    transition: transform 600ms cubic-bezier(0.2,0.8,0.2,1);
    pointer-events: none;
}

.button--primary:hover::after {
    transform: translateX(100%);
}

/* ════════════════════════════════════════
   HERO PROOF ITEMS — styled via hover only
   ════════════════════════════════════════ */
.hero-proof-item__label {
    color: rgba(var(--color-secondary-rgb), 0.82);
}

/* ════════════════════════════════════════
   PAGE HERO CONTENT entrance — handled by main.js reveal system
   ════════════════════════════════════════ */

/* ════════════════════════════════════════
   PAGE STAGE entrance — via transition on hover, not animation
   ════════════════════════════════════════ */

/* ════════════════════════════════════════
   NAV scrolled state
   ════════════════════════════════════════ */
.home-nav.is-scrolled .home-nav__inner {
    box-shadow: 0 12px 40px rgba(0,20,48,0.14), 0 2px 8px rgba(0,20,48,0.06);
}

/* ════════════════════════════════════════
   STORY POINT hover
   ════════════════════════════════════════ */
.story-point {
    border-left: 2px solid rgba(31,157,203,0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

.story-point:hover {
    border-left-color: var(--color-secondary);
    background: rgba(31,157,203,0.06);
    transform: translateX(4px);
}

/* ════════════════════════════════════════
   WORKFLOW CARD
   ════════════════════════════════════════ */
.workflow-card {
    border: 1px solid rgba(31,157,203,0.08);
}

.workflow-list__index {
    transition: transform 0.2s ease, background 0.2s ease;
}

.workflow-list li:hover .workflow-list__index {
    transform: scale(1.1);
    background: rgba(31,157,203,0.22);
}

/* ════════════════════════════════════════
   EVENTS TIMELINE
   ════════════════════════════════════════ */
.events-timeline__item {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.events-timeline__item:hover {
    transform: translateX(4px);
}

/* ════════════════════════════════════════
   MEDIA CARD (gallery)
   ════════════════════════════════════════ */
.media-card {
    transition: box-shadow 0.3s ease;
    overflow: hidden;
}

.media-card:hover {
    box-shadow: 0 28px 64px rgba(0,20,48,0.16);
}

.media-card img {
    transition: transform 800ms cubic-bezier(0.2,0.8,0.2,1);
}

.media-card:hover img {
    transform: scale(1.04);
}

/* ════════════════════════════════════════
   FORM CARD
   ════════════════════════════════════════ */
.form-card--light {
    border: 1px solid rgba(0,20,48,0.07);
    box-shadow: 0 18px 50px rgba(0,20,48,0.07), inset 0 1px 0 rgba(255,255,255,0.9);
    transition: box-shadow 0.3s ease;
}

.form-card--light:hover {
    box-shadow: 0 28px 70px rgba(0,20,48,0.10), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* Form field focus glow */
.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: rgba(31,157,203,0.5);
    box-shadow: 0 0 0 3px rgba(31,157,203,0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ════════════════════════════════════════
   PILL LIST
   ════════════════════════════════════════ */
.page-pill {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.page-pill:hover {
    background: rgba(31,157,203,0.18);
    transform: translateY(-1px);
}

/* ════════════════════════════════════════
   COUNTER VALUE
   ════════════════════════════════════════ */
.counter-value {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════
   GUIDE SECTIONS
   ════════════════════════════════════════ */
.guide-spec-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.guide-spec-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,20,48,0.09);
    border-color: rgba(31,157,203,0.16);
}

.guide-experiment {
    transition: box-shadow 0.3s ease;
}

.guide-experiment:hover {
    box-shadow: 0 24px 60px rgba(0,20,48,0.10);
}

.guide-pipeline__step {
    transition: transform 0.2s ease;
}

.guide-pipeline__step:hover {
    transform: translateY(-2px);
}

.guide-pipeline__icon {
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.guide-pipeline__step:hover .guide-pipeline__icon {
    background: rgba(31,157,203,0.22);
    transform: scale(1.08);
}

/* ════════════════════════════════════════
   SECTION HEADING — first word accent
   ════════════════════════════════════════ */
.section-kicker::before {
    background: linear-gradient(90deg, rgba(31,157,203,0.92), rgba(251,178,43,0.6));
}

/* ════════════════════════════════════════
   ADMIN METRIC CARDS (inscriere)
   ════════════════════════════════════════ */
.admin-metric-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.admin-metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 40px rgba(0,20,48,0.09);
}

/* ════════════════════════════════════════
   FOOTER ENHANCEMENT
   ════════════════════════════════════════ */
.site-footer {
    border-top: 1px solid rgba(31,157,203,0.10);
}

/* ════════════════════════════════════════
   STORY CARD image hover
   ════════════════════════════════════════ */
.story-card--image {
    transition: box-shadow 0.3s ease;
}

.story-card--image:hover {
    box-shadow: 0 28px 64px rgba(0,20,48,0.18);
}

/* ════════════════════════════════════════
   PAGE SECTION story aurora
   ════════════════════════════════════════ */
.page-section--about-method,
.page-section--events-story,
.home-section--story {
    position: relative;
    overflow: hidden;
}

.page-section--about-method::before,
.page-section--events-story::before {
    content: "";
    position: absolute;
    top: -8rem; right: -8rem;
    width: 36rem; height: 36rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31,157,203,0.06) 0%, transparent 70%);
    pointer-events: none;
    filter: blur(40px);
}

/* ════════════════════════════════════════
   METRIC CARD value gradient
   ════════════════════════════════════════ */
.metric-card__value {
    background: linear-gradient(135deg, #001430 0%, #1f9dcb 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: clamp(2.2rem, 3.5vw, 2.8rem);
}

.metric-card--accent .metric-card__value {
    background: linear-gradient(120deg, #fbb22b 0%, #f5830a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ════════════════════════════════════════
   TRUST CARDS (home)
   ════════════════════════════════════════ */
.home-trust .trust-card {
    transition: transform 0.28s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.28s ease, border-color 0.28s ease;
}

.home-trust .trust-card:hover {
    transform: translateY(-5px) scale(1.005);
    box-shadow: 0 28px 64px rgba(251,178,43,0.18), 0 10px 28px rgba(0,20,48,0.08);
}