/**
 * OMNIUM Layout — Section-specific layouts
 * © Omar Dakhane
 */

/* ═══ HERO ═══ */
.hero { height:100vh; min-height:700px; position:relative; overflow:hidden; display:flex; align-items:center; }
.blob-wrap { position:absolute; inset:0; z-index:0; overflow:hidden; }
.no-blobs .blob-wrap { display:none; }
.blob { position:absolute; border-radius:50%; filter:blur(120px); opacity:0.07; animation:bFloat 20s ease-in-out infinite; }
.blob-1 { width:700px; height:700px; top:-15%; right:-5%; background:var(--gold); }
.blob-2 { width:500px; height:500px; bottom:-10%; left:-8%; background:var(--mint); animation-delay:-6s; animation-duration:24s; opacity:0.04; }
.blob-3 { width:400px; height:400px; top:40%; left:50%; background:var(--iris); animation-delay:-12s; animation-duration:18s; opacity:0.03; }
@keyframes bFloat {
    0%,100%{transform:translate(0,0) scale(1)}
    25%{transform:translate(40px,-50px) scale(1.1)}
    50%{transform:translate(-30px,30px) scale(0.95)}
    75%{transform:translate(20px,40px) scale(1.05)}
}
.grid-lines { position:absolute; inset:0; z-index:1; pointer-events:none; }
.no-grid .grid-lines { display:none; }
.g-v, .g-h { position:absolute; background:rgba(255,255,255,0.018); }
.g-v { width:1px; top:0; bottom:0; }
.g-h { height:1px; left:0; right:0; }
.g-v:nth-child(1){left:25%} .g-v:nth-child(2){left:50%} .g-v:nth-child(3){left:75%}
.g-h:nth-child(4){top:33%} .g-h:nth-child(5){top:66%}
.hero-ring { position:absolute; width:600px; height:600px; top:50%; left:50%; transform:translate(-50%,-50%); z-index:1; pointer-events:none; }
.no-ring .hero-ring { display:none; }
.hero-ring svg { width:100%; height:100%; animation:ringRotate 40s linear infinite; }
@keyframes ringRotate { to { transform:rotate(360deg); } }
.hero-ct { position:relative; z-index:5; width:var(--container); margin:0 auto; }
.h-eyebrow { font-family:var(--mono); font-size:0.6rem; letter-spacing:0.5em; text-transform:uppercase; color:var(--gold); display:flex; align-items:center; gap:1.5rem; margin-bottom:2.5rem; opacity:0; animation:fUp 0.8s var(--ease) forwards 2.6s; }
.h-eyebrow-line { width:50px; height:1px; background:var(--gold); opacity:0.5; }
.h-title { font-family:var(--serif); font-weight:300; line-height:0.88; margin-bottom:3rem; }
.h-tl { display:block; overflow:hidden; font-size:clamp(5rem, 13vw, var(--hero-title-size, 12rem)); }
.h-tl-in { display:block; transform:translateY(120%); animation:titleUp 1.4s var(--ease) forwards; }
.h-tl:nth-child(1) .h-tl-in { animation-delay:2.5s; }
.h-tl:nth-child(2) .h-tl-in { animation-delay:2.7s; }
@keyframes titleUp { to { transform:translateY(0); } }
.h-tl-gold { background:linear-gradient(135deg, var(--gold-l) 0%, var(--gold) 50%, #b8943f 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; font-style:italic; font-weight:400; }
.h-roles { display:flex; align-items:center; gap:2rem; margin-bottom:3.5rem; opacity:0; animation:fUp 0.8s var(--ease) forwards 3.1s; }
.h-role-line { width:40px; height:1px; background:var(--border); }
.h-role-scroller { height:1.6em; overflow:hidden; font-size:0.9rem; font-weight:300; color:var(--dim); }
.h-role-track { animation:roleScroll 10s ease-in-out infinite; }
.h-role-item { display:block; height:1.6em; line-height:1.6em; }
@keyframes roleScroll {
    0%,18%{transform:translateY(0)} 20%,38%{transform:translateY(-1.6em)}
    40%,58%{transform:translateY(-3.2em)} 60%,78%{transform:translateY(-4.8em)}
    80%,98%{transform:translateY(-6.4em)} 100%{transform:translateY(-8em)}
}
.h-cta { display:flex; gap:1.5rem; opacity:0; animation:fUp 0.8s var(--ease) forwards 3.3s; }
.h-side { position:absolute; right:min(3vw,50px); top:50%; transform:translateY(-50%) rotate(90deg); transform-origin:center; font-family:var(--mono); font-size:0.5rem; letter-spacing:0.35em; text-transform:uppercase; color:var(--muted); z-index:5; opacity:0; animation:fIn 1s ease forwards 3.5s; }
.h-scroll { position:absolute; bottom:2.5rem; left:50%; transform:translateX(-50%); z-index:5; display:flex; flex-direction:column; align-items:center; gap:0.8rem; opacity:0; animation:fIn 1s ease forwards 3.6s; }
.h-scroll-txt { font-family:var(--mono); font-size:0.5rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--muted); }
.h-scroll-bar { width:1px; height:40px; position:relative; overflow:hidden; }
.h-scroll-bar::after { content:''; position:absolute; left:0; width:100%; height:100%; background:linear-gradient(to bottom, transparent, var(--gold)); animation:sDrop 2.5s ease-in-out infinite; top:-100%; }
@keyframes sDrop { 0%{top:-100%} 100%{top:100%} }
@keyframes fUp { from{opacity:0;transform:translateY(25px)} to{opacity:1;transform:translateY(0)} }
@keyframes fIn { from{opacity:0} to{opacity:1} }

/* ═══ MARQUEE ═══ */
.marq { padding:1.2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); overflow:hidden; }
.marq-track { display:flex; width:max-content; animation:marqGo 40s linear infinite; }
.marq-item { font-family:var(--serif); font-size:1rem; font-weight:300; font-style:italic; color:var(--muted); padding:0 2.5rem; display:flex; align-items:center; gap:2.5rem; white-space:nowrap; }
.marq-dot { width:3px; height:3px; background:var(--gold); border-radius:50%; opacity:0.4; flex-shrink:0; }
@keyframes marqGo { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ═══ PILLARS ═══ */
.pillars { padding:var(--section-gap) 0; perspective:1200px; }
.pill-hdr { width:var(--container); margin:0 auto 6rem; display:flex; align-items:flex-end; justify-content:space-between; }
.pill-label { font-family:var(--mono); font-size:var(--fs-mono, 0.58rem); letter-spacing:0.5em; text-transform:uppercase; color:var(--gold); margin-bottom:0.75rem; }
.pill-title { font-family:var(--serif); font-size:clamp(2.5rem,5vw,var(--fs-h2, 4.5rem)); font-weight:300; color:var(--white); line-height:1.05; }
.pill-big-num { font-family:var(--serif); font-size:6rem; font-weight:300; color:rgba(255,255,255,0.025); line-height:1; }
.pill-grid { width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.pill-card { position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer; aspect-ratio:3/4; transition:transform 0.6s var(--ease), box-shadow 0.6s var(--ease); transform-style:preserve-3d; will-change:transform; }
.no-cursor .pill-card { cursor:pointer; }
.pill-card:hover { z-index:10; box-shadow:0 30px 80px rgba(0,0,0,0.5); }
.pc-bg { position:absolute; inset:0; transition:transform 0.8s var(--ease); }
.pill-card:hover .pc-bg { transform:scale(1.06); }
.pc-v .pc-bg { background:radial-gradient(ellipse at 30% 20%, rgba(201,168,76,0.15) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(201,168,76,0.08) 0%, transparent 40%), linear-gradient(180deg, #13110e, #0a0908); }
.pc-l .pc-bg { background:radial-gradient(ellipse at 30% 20%, rgba(0,232,162,0.12) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(0,232,162,0.06) 0%, transparent 40%), linear-gradient(180deg, #0b110f, #070a09); }
.pc-s .pc-bg { background:radial-gradient(ellipse at 30% 20%, rgba(255,94,58,0.12) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(255,94,58,0.06) 0%, transparent 40%), linear-gradient(180deg, #130e0b, #0a0807); }
.pc-m .pc-bg { background:radial-gradient(ellipse at 30% 20%, rgba(147,129,255,0.12) 0%, transparent 50%), radial-gradient(ellipse at 70% 80%, rgba(147,129,255,0.06) 0%, transparent 40%), linear-gradient(180deg, #0e0d13, #08070a); }
.pc-glow { position:absolute; inset:-1px; border-radius:var(--radius); opacity:0; transition:opacity 0.6s; z-index:1; pointer-events:none; }
.pill-card:hover .pc-glow { opacity:1; }
.pc-v .pc-glow{box-shadow:inset 0 0 0 1px rgba(201,168,76,0.25), 0 0 40px rgba(201,168,76,0.05)}
.pc-l .pc-glow{box-shadow:inset 0 0 0 1px rgba(0,232,162,0.2), 0 0 40px rgba(0,232,162,0.04)}
.pc-s .pc-glow{box-shadow:inset 0 0 0 1px rgba(255,94,58,0.2), 0 0 40px rgba(255,94,58,0.04)}
.pc-m .pc-glow{box-shadow:inset 0 0 0 1px rgba(147,129,255,0.2), 0 0 40px rgba(147,129,255,0.04)}
.pc-ct { position:relative; z-index:2; height:100%; padding:2.5rem; display:flex; flex-direction:column; }
.pc-num { font-family:var(--serif); font-size:6rem; font-weight:300; line-height:1; opacity:0.06; margin-bottom:auto; transition:opacity 0.5s; }
.pill-card:hover .pc-num { opacity:0.12; }
.pc-icon { width:48px; height:48px; margin-bottom:1.5rem; opacity:0.5; transition:opacity 0.5s, transform 0.5s var(--ease); }
.pill-card:hover .pc-icon { opacity:1; transform:translateY(-5px); }
.pc-name { font-family:var(--serif); font-size:2rem; font-weight:400; font-style:italic; color:var(--white); margin-bottom:0.75rem; transition:transform 0.5s var(--ease); }
.pill-card:hover .pc-name { transform:translateX(8px); }
.pc-desc { font-size:var(--fs-body, 0.85rem); color:var(--dim); line-height:1.7; max-width:280px; }
.pc-tags { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.5rem; }
.pc-tag { font-family:var(--mono); font-size:0.55rem; letter-spacing:0.1em; text-transform:uppercase; padding:0.3rem 0.6rem; border-radius:3px; opacity:0; transform:translateY(8px); transition:opacity 0.4s, transform 0.4s var(--ease); }
.pill-card:hover .pc-tag { opacity:1; transform:translateY(0); }
.pill-card:hover .pc-tag:nth-child(1){transition-delay:.05s}
.pill-card:hover .pc-tag:nth-child(2){transition-delay:.1s}
.pill-card:hover .pc-tag:nth-child(3){transition-delay:.15s}
.pill-card:hover .pc-tag:nth-child(4){transition-delay:.2s}
.pc-v .pc-tag{background:rgba(201,168,76,0.1);color:var(--gold)}
.pc-l .pc-tag{background:rgba(0,232,162,0.08);color:var(--mint)}
.pc-s .pc-tag{background:rgba(255,94,58,0.08);color:var(--ember)}
.pc-m .pc-tag{background:rgba(147,129,255,0.08);color:var(--iris)}
.pc-arrow { position:absolute; top:2.5rem; right:2.5rem; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; justify-content:center; transition:all 0.5s var(--ease); z-index:3; }
.pill-card:hover .pc-arrow { transform:rotate(-45deg); }
.pc-v:hover .pc-arrow{border-color:var(--gold);background:rgba(201,168,76,0.08)}
.pc-l:hover .pc-arrow{border-color:var(--mint);background:rgba(0,232,162,0.06)}
.pc-s:hover .pc-arrow{border-color:var(--ember);background:rgba(255,94,58,0.06)}
.pc-m:hover .pc-arrow{border-color:var(--iris);background:rgba(147,129,255,0.06)}
.pc-arrow svg{width:16px;height:16px;stroke:var(--dim);stroke-width:1.5;fill:none}
.pc-v:hover .pc-arrow svg{stroke:var(--gold)}
.pc-l:hover .pc-arrow svg{stroke:var(--mint)}
.pc-s:hover .pc-arrow svg{stroke:var(--ember)}
.pc-m:hover .pc-arrow svg{stroke:var(--iris)}

/* ═══ HORIZONTAL SHOWCASE ═══ */
.hscroll { padding:var(--section-gap) 0; overflow:hidden; }
.hscroll-hdr { width:var(--container); margin:0 auto 4rem; display:flex; align-items:flex-end; justify-content:space-between; }
.hscroll-wrap { position:relative; width:100%; scrollbar-width:none; }
.hscroll-wrap::-webkit-scrollbar { display:none; }
.hscroll-track { display:flex; gap:2rem; padding:0 calc((100vw - var(--container))/2); }
.hs-card { flex-shrink:0; width:420px; position:relative; overflow:hidden; border-radius:16px; background:var(--surface); border:1px solid var(--border); transition:transform 0.5s var(--ease), border-color 0.4s; cursor:pointer; }
.no-cursor .hs-card { cursor:pointer; }
.hs-card:hover { transform:translateY(-8px); }
.hs-img { width:100%; height:260px; position:relative; overflow:hidden; }
.hs-img-bg { width:100%; height:100%; transition:transform 0.8s var(--ease); }
.hs-card:hover .hs-img-bg { transform:scale(1.08); }
.hi-1{background:linear-gradient(155deg,#1a160e,#0d0b07)}.hi-2{background:linear-gradient(155deg,#0e1a15,#070d0a)}.hi-3{background:linear-gradient(155deg,#1a0e0b,#0d0707)}.hi-4{background:linear-gradient(155deg,#12101a,#09080d)}.hi-5{background:linear-gradient(155deg,#1a1610,#0d0b08)}
.hs-badge { position:absolute; top:1.2rem; left:1.2rem; }
.hs-info { padding:1.8rem 2rem; }
.hs-type { font-family:var(--mono); font-size:var(--fs-mono, 0.58rem); letter-spacing:0.15em; text-transform:uppercase; color:var(--muted); margin-bottom:0.5rem; }
.hs-name { font-family:var(--serif); font-size:var(--fs-card-title, 1.5rem); font-weight:400; color:var(--white); margin-bottom:0.75rem; }
.hs-foot { display:flex; justify-content:space-between; align-items:center; }
.hs-meta { font-size:0.8rem; color:var(--muted); }
.hs-price { font-family:var(--sans); font-weight:700; color:var(--gold); font-size:0.9rem; }

/* ═══ STATS ═══ */
.stats { padding:var(--section-gap) 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.stats-grid { width:var(--container); margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; text-align:center; }
.stat-item { padding:2rem 0; }
.stat-num { font-family:var(--serif); font-size:clamp(3rem,6vw,5rem); font-weight:300; color:var(--white); line-height:1; margin-bottom:0.5rem; }
.stat-suffix { font-size:0.5em; color:var(--gold); font-style:italic; }
.stat-label { font-family:var(--mono); font-size:var(--fs-mono, 0.6rem); letter-spacing:0.25em; text-transform:uppercase; color:var(--muted); }

/* ═══ MANIFESTO ═══ */
.manifesto { display:grid; grid-template-columns:1fr 1fr; min-height:80vh; }
.mf-left { padding:var(--section-gap) 6rem; display:flex; flex-direction:column; justify-content:center; border-right:1px solid var(--border); }
.mf-right { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.mf-right-bg { position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(201,168,76,0.04) 0%, transparent 60%); }
.mf-big { font-family:var(--serif); font-size:clamp(1.8rem,3.5vw,3.2rem); font-weight:300; color:var(--white); line-height:1.35; margin-bottom:2rem; }
.mf-gold { color:var(--gold); font-style:italic; }
.mf-body { font-size:var(--fs-body, 0.95rem); font-weight:300; color:var(--dim); line-height:var(--line-height, 1.9); max-width:500px; }
.mf-quote-mark { font-family:var(--serif); font-size:15rem; font-weight:300; color:rgba(201,168,76,0.06); line-height:1; position:relative; z-index:1; }
.mf-signature { font-family:var(--serif); font-size:1.5rem; font-style:italic; color:var(--gold); margin-top:1rem; position:relative; z-index:1; }

/* ═══ CTA / NEWSLETTER ═══ */
.cta-sect { padding:var(--section-gap) 0; }
.cta-box { width:var(--container); margin:0 auto; position:relative; padding:6rem 4rem; border:1px solid var(--border); border-radius:24px; overflow:hidden; text-align:center; }
.cta-orb { position:absolute; border-radius:50%; filter:blur(150px); pointer-events:none; }
.cta-orb-1{width:400px;height:400px;top:-150px;right:-100px;background:var(--gold);opacity:0.04}
.cta-orb-2{width:300px;height:300px;bottom:-100px;left:-50px;background:var(--iris);opacity:0.03}
.cta-title { font-family:var(--serif); font-size:clamp(2rem,4vw,3.5rem); font-weight:300; color:var(--white); margin-bottom:1rem; position:relative; }
.cta-sub { color:var(--dim); font-weight:300; margin-bottom:3rem; position:relative; }
.cta-form { display:flex; gap:0; max-width:520px; margin:0 auto; position:relative; }
.cta-inp { flex:1; padding:1.2rem 1.8rem; background:var(--deep); border:1px solid var(--border); border-right:none; color:var(--white); font-family:var(--sans); font-size:0.85rem; outline:none; transition:border-color 0.3s; border-radius:12px 0 0 12px; }
.cta-inp::placeholder{color:var(--muted)}
.cta-inp:focus{border-color:var(--gold)}
.cta-btn { padding:1.2rem 2.2rem; background:var(--gold); color:var(--black); font-family:var(--sans); font-size:0.68rem; font-weight:700; letter-spacing:0.15em; text-transform:uppercase; border:none; cursor:pointer; transition:background 0.4s; border-radius:0 12px 12px 0; }
.no-cursor .cta-btn { cursor:pointer; }
.cta-btn:hover { background:var(--white); }

/* ═══ GENERIC PAGE ═══ */
.omnium-main { padding:9rem 0 var(--section-gap); min-height:100vh; }
.page-container { width:var(--container); margin:0 auto; }

/* GLOBAL HEADER CLEARANCE — ensures no content EVER overlaps the fixed header */
/* This is the single source of truth for top spacing */
body:not(.home) .omnium-main:not([style*="padding-top:0"]) {
    padding-top: 9rem;
}

/* WooCommerce pages that go through page.php */
.woocommerce-page:not(.single-product) .page-content,
.woocommerce-page:not(.single-product) .page-container {
    padding-top: 0; /* already handled by .omnium-main */
}

/* Ensure dark background on ALL pages */
body, main, .omnium-main, .omnium-shop {
    background: var(--black);
}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1200px) {
    .pill-grid { grid-template-columns:repeat(2,1fr); }
    .pill-card { aspect-ratio:auto; min-height:400px; }
}
@media(max-width:768px) {
    .h-tl { font-size:clamp(3rem,15vw,5.5rem); }
    .pill-grid { grid-template-columns:1fr; }
    .pill-card { min-height:350px; }
    .manifesto { grid-template-columns:1fr; }
    .mf-left { padding:5rem 2rem; }
    .mf-right { min-height:50vh; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .hs-card { width:300px; }
    .cta-form { flex-direction:column; }
    .cta-inp { border-right:1px solid var(--border); border-radius:12px; }
    .cta-btn { border-radius:12px; }
    .h-side { display:none; }
    .cta-box { padding:4rem 2rem; }
    .mf-left { border-right:none; border-bottom:1px solid var(--border); }
}