/* =========================================================================
   🌍 ODA LIVING ARCHITECTURE EDITION (CSS) - INTEGRATED VARIABLES
   ========================================================================= */

/* 🛠️ გლობალური ფიქსი (აქრობს ორმაგ სქროლს სამუდამოდ) */
html {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    height: auto !important;
}

body {
    overflow-x: hidden !important;
    overflow-y: visible !important;
    height: auto !important;
}

/* მთავარი ვრეპერი - სრულად ინტეგრირებული შენს გლობალურ ცვლადებთან */
.oda-premium-wrapper {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: 'BPG_Header', sans-serif;
    background-image: radial-gradient(circle at 50% 0%, rgba(197, 168, 128, 0.02) 0%, transparent 50%);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.oda-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 5%;
}

/* 🏷️ სათაურები და ტექსტები */
.oda-main-title, .oda-showcase-title, .oda-partners-title, .oda-manifesto h2 {
    color: var(--text-heading);
    text-align: center;
}

.oda-feature-row h3 {
    color: var(--text-heading);
}

.oda-feature-row p, .oda-stat-item p {
    color: var(--text-muted);
}

/* --- 🔥 SCROLL REVEAL ANIMATIONS (GPU აჩქარებული) --- */
.oda-reveal-up, .oda-reveal-left, .oda-reveal-right {
    opacity: 0;
    will-change: transform, opacity;
}

.oda-reveal-up { transform: translateY(30px); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.oda-reveal-left { transform: translateX(-30px); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.oda-reveal-right { transform: translateX(30px); transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1); }

.oda-is-visible { opacity: 1 !important; transform: translate(0, 0) !important; }

/* -------------------------------------------------------------------------- */
/* 1. HERO & BLUEPRINT WORD EFFECT */
/* -------------------------------------------------------------------------- */
.oda-hero {
    padding: 15vh 0 10vh 0;
    position: relative;
    border-bottom: 1px solid var(--border-color);
}

.oda-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.oda-main-title {
    font-size: clamp(40px, 5.5vw, 85px);
    line-height: 1.1;
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.oda-blueprint-word {
    position: relative;
    display: inline-block;
    padding: 0 15px;
    margin: 0 5px;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--text-muted);
    transition: all 0.5s ease;
}

.oda-blueprint-word::before {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--text-subtitle), transparent);
    background-size: 200% 100%;
    animation: panLine 3s infinite linear;
}

.oda-blueprint-word:hover {
    color: var(--text-subtitle);
    -webkit-text-stroke: 0px;
    text-shadow: 0 0 20px rgba(197, 168, 128, 0.4);
}

.oda-node {
    position: absolute;
    width: 12px;
    height: 12px;
    border: 2px solid var(--text-subtitle);
    opacity: 0.7;
}

.oda-node.top-left {
    top: -5px;
    left: 0;
    border-right: none;
    border-bottom: none;
    animation: floatNodeTL 4s infinite ease-in-out alternate;
}

.oda-node.bottom-right {
    bottom: -5px;
    right: 0;
    border-left: none;
    border-top: none;
    animation: floatNodeBR 4s infinite ease-in-out alternate;
}

@keyframes panLine { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes floatNodeTL { 0% { transform: translate(0, 0); } 100% { transform: translate(-5px, -5px); } }
@keyframes floatNodeBR { 0% { transform: translate(0, 0); } 100% { transform: translate(5px, 5px); } }

/* სურათის ჩარჩო */
.oda-image-mask {
    position: relative;
    width: 100%;
    height: 650px;
    border-radius: 4px;
    overflow: hidden;
}

.oda-image-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.05);
    animation: imageBreathe 20s infinite alternate ease-in-out;
}

.oda-ambient-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    box-shadow: inset 0 0 100px rgba(0,0,0,0.4);
    pointer-events: none;
    z-index: 2;
}

.oda-frame-line {
    position: absolute;
    background: var(--text-subtitle);
    z-index: 3;
    will-change: top, left, bottom, right, width, height;
}

.oda-frame-line.line-up { left: 0; bottom: -100%; width: 2px; height: 100%; animation: runLineUp 4s infinite linear; }
.oda-frame-line.line-down { right: 0; top: -100%; width: 2px; height: 100%; animation: runLineDown 4s infinite linear; }
.oda-frame-line.line-top { top: 0; left: -100%; width: 100%; height: 2px; animation: runLineTop 4s infinite linear; animation-delay: 1s; }
.oda-frame-line.line-bottom { bottom: 0; right: -100%; width: 100%; height: 2px; animation: runLineBottom 4s infinite linear; animation-delay: 1s; }

@keyframes runLineUp { 0% { bottom: -100%; } 100% { bottom: 100%; } }
@keyframes runLineDown { 0% { top: -100%; } 100% { top: 100%; } }
@keyframes runLineTop { 0% { left: -100%; } 100% { left: 100%; } }
@keyframes runLineBottom { 0% { right: -100%; } 100% { right: 100%; } }
@keyframes imageBreathe { 0% { transform: scale(1.02); } 100% { transform: scale(1.08); } }

/* -------------------------------------------------------------------------- */
/* 2. PHILOSOPHY QUOTE */
/* -------------------------------------------------------------------------- */
.oda-philosophy {
    padding: 100px 0;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}

.oda-quote {
    font-size: clamp(24px, 3vw, 40px);
    line-height: 1.5;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    font-style: italic;
    background: linear-gradient(45deg, var(--text-heading), var(--text-subtitle));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* -------------------------------------------------------------------------- */
/* 3. INTERACTIVE STATS */
/* -------------------------------------------------------------------------- */
.oda-stats {
    padding: 120px 0;
    background: linear-gradient(to bottom, var(--bg-main), var(--bg-footer));
    border-bottom: 1px solid var(--border-color);
}
.oda-stats-grid { display: flex; justify-content: space-around; }
.oda-stat-item { text-align: center; }
.oda-stat-circle {
    width: 160px; height: 160px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
}
.oda-progress-ring {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);
    animation: spinRing 20s linear infinite;
}
.oda-progress-ring circle {
    fill: transparent;
    stroke: rgba(197, 168, 128, 0.2);
    stroke-width: 2;
    stroke-dasharray: 400 90;
    transition: all 0.5s ease;
}
.oda-stat-circle:hover .oda-progress-ring circle {
    stroke: var(--text-subtitle);
    filter: drop-shadow(0 0 10px rgba(197, 168, 128, 0.5));
}
.oda-stat-number { font-size: 36px; font-weight: 800; color: var(--text-heading); }

@keyframes spinRing { 100% { transform: rotate(270deg); } }

/* -------------------------------------------------------------------------- */
/* 4. EXPANDED FEATURES */
/* -------------------------------------------------------------------------- */
.oda-features { padding: 140px 0; border-bottom: 1px solid var(--border-color); }
.oda-feature-list {
    display: flex;
    flex-direction: column;
    gap: 90px;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
}
.oda-feature-list::before {
    content: '';
    position: absolute;
    top: 0; left: 15px;
    width: 1px; height: 100%;
    background: linear-gradient(to bottom, transparent, var(--text-subtitle), transparent);
    opacity: 0.3;
}
.oda-feature-row {
    display: grid;
    grid-template-columns: 0.6fr 1.4fr;
    gap: 60px;
    position: relative;
    padding-left: 60px;
    will-change: transform;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.oda-feature-row::before {
    content: '';
    position: absolute;
    left: 11px; top: 15px;
    width: 9px; height: 9px;
    background: var(--bg-main);
    border: 2px solid var(--text-subtitle);
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.3s ease;
}
.oda-feature-row:hover::before { transform: scale(1.5); background: var(--text-subtitle); }
.oda-feature-row:hover { transform: translateX(15px); }

/* -------------------------------------------------------------------------- */
/* ✨ SHOWCASE (კოლექციები) */
/* -------------------------------------------------------------------------- */
.oda-showcase { padding: 140px 0; border-bottom: 1px solid var(--border-color); }
.oda-showcase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }
.oda-showcase-item {
    position: relative;
    overflow: hidden;
    height: 500px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}
.oda-showcase-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1); }
.oda-showcase-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 70%);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0.9;
    transition: opacity 0.4s ease;
}
.oda-showcase-item:hover img { transform: scale(1.06); }
.oda-showcase-item:hover .oda-showcase-overlay { opacity: 1; }
.oda-showcase-meta { font-size: 14px; color: var(--text-subtitle); margin-bottom: 10px; letter-spacing: 2px; }
.oda-showcase-name { font-size: 24px; font-weight: 600; color: #ffffff; margin: 0; }

/* -------------------------------------------------------------------------- */
/* ✨ BRAND MANIFESTO & INTERACTIVE CTA */
/* -------------------------------------------------------------------------- */
.oda-manifesto {
    padding: 160px 0;
    background: var(--bg-footer);
    text-align: center;
    border-bottom: 1px solid var(--border-color);
    position: relative;
}
.oda-manifesto-inner { max-width: 850px; margin: 0 auto; }
.oda-manifesto-tag { font-size: 13px; letter-spacing: 4px; color: var(--text-subtitle); text-transform: uppercase; margin-bottom: 30px; display: block; }
.oda-action-btn {
    display: inline-block;
    padding: 18px 45px;
    border: 1px solid var(--text-subtitle);
    color: var(--text-heading);
    text-decoration: none;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    position: relative;
    overflow: hidden;
}
.oda-action-btn:hover {
    color: var(--bg-main);
    background: var(--text-subtitle);
    box-shadow: 0 0 30px rgba(197, 168, 128, 0.3);
}

/* -------------------------------------------------------------------------- */
/* 5. PARTNERS MARQUEE (უსასრულო კარუსელის იდეალური ფიქსი) */
/* -------------------------------------------------------------------------- */
.oda-partners { 
    padding: 120px 0; 
    overflow: hidden; 
    position: relative; 
    background: var(--bg-main); 
    border-bottom: 1px solid var(--border-color);
}
.oda-marquee-container { 
    display: flex; 
    width: 100%; 
    overflow: hidden; 
    position: relative;
    /* გვერდებზე ჰარმონიული ჩაქრობის ეფექტი */
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.oda-marquee-track { 
    display: flex; 
    gap: 30px; 
    width: max-content; 
    animation: marqueeContinuous 30s linear infinite; 
    will-change: transform; 
}
.oda-partner-card {
    width: 220px; height: 110px;
    background: var(--bg-footer);
    border: 1px solid var(--border-color);
    display: flex; align-items: center; justify-content: center;
    border-radius: 4px; padding: 20px;
    flex-shrink: 0;
    transition: border-color 0.3s ease, background 0.3s ease;
}
.oda-partner-card img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
    filter: grayscale(1) opacity(0.5); 
    transition: filter 0.3s ease; 
}
.oda-partner-card:hover { border-color: var(--text-subtitle); }
.oda-partner-card:hover img { filter: grayscale(0) opacity(1); }

/* უწყვეტი მოძრაობა - მუშაობს იდეალურად დუბლირებულ HTML-ზე */
@keyframes marqueeContinuous {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* -------------------------------------------------------------------------- */
/* RESPONSIVE ADAPTATION */
/* -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .oda-hero-grid { gap: 40px; }
    .oda-image-mask { height: 500px; }
    .oda-showcase-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 992px) {
    .oda-hero-grid { grid-template-columns: 1fr; text-align: center; }
    .oda-stats-grid { flex-direction: column; gap: 40px; align-items: center; }
    .oda-feature-row { grid-template-columns: 1fr; padding-left: 40px; gap: 20px; }
    .oda-feature-list::before { left: 5px; }
    .oda-feature-row::before { left: 1px; }
}
@media (max-width: 576px) {
    .oda-hero { padding: 10vh 0 60px 0; }
    .oda-image-mask { height: 380px; }
    .oda-partner-card { width: 170px; height: 90px; }
    .oda-showcase-item { height: 350px; }
}