/* Guide Export — motion and premium finish layer (loaded last on every page).
   Everything here is progressive: without motion.js the page looks exactly as before. */
:root{--ge-gold:#f3b33d;--ge-gold-2:#ffd47a;--ge-navy:#061b35;--ge-blue:#0750ad;--ge-sky:#19b8ef;--ge-ease:cubic-bezier(.2,.8,.2,1);--ge-shadow-lift:0 24px 60px rgba(6,27,53,.18),0 6px 18px rgba(6,27,53,.08)}

/* Scroll progress */
.ge-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:200;pointer-events:none;background:linear-gradient(90deg,var(--ge-sky),var(--ge-blue) 55%,var(--ge-gold));transform-origin:0 50%;transform:scaleX(0)}
[dir=rtl] .ge-progress{transform-origin:100% 50%}

/* Glass header once the page scrolls */
.site-header,.ge-header{transition:background-color .35s var(--ge-ease),box-shadow .35s var(--ge-ease),min-height .35s var(--ge-ease),backdrop-filter .35s}
.site-header.is-scrolled,.ge-header.is-scrolled{background:rgba(255,255,255,.78)!important;-webkit-backdrop-filter:saturate(170%) blur(16px);backdrop-filter:saturate(170%) blur(16px);box-shadow:0 10px 30px rgba(6,27,53,.10)}

/* Reveal on scroll (classes are added by motion.js only for content below the fold) */
.ge-reveal{opacity:0;transform:translate3d(0,28px,0) scale(.985);transition:opacity .8s var(--ge-ease),transform .9s var(--ge-ease);will-change:opacity,transform}
.ge-reveal.ge-in{opacity:1;transform:none}
.ge-reveal.ge-from-side{transform:translate3d(-34px,0,0)}
[dir=rtl] .ge-reveal.ge-from-side{transform:translate3d(34px,0,0)}
.ge-reveal.ge-from-side.ge-in{transform:none}
.ge-d1{transition-delay:.06s}.ge-d2{transition-delay:.12s}.ge-d3{transition-delay:.18s}.ge-d4{transition-delay:.24s}.ge-d5{transition-delay:.30s}.ge-d6{transition-delay:.36s}

/* Section eyebrows get an animated gold rule */
.ge-eyebrow{position:relative}
.ge-eyebrow::after{content:"";display:block;height:2px;width:0;margin-top:10px;border-radius:2px;background:linear-gradient(90deg,var(--ge-gold),var(--ge-gold-2));transition:width 1s var(--ge-ease) .2s}
.ge-eyebrow.ge-in::after,.ge-eyebrow.ge-static::after{width:46px}

/* Hero: slow cinematic zoom, richer overlay, animated accent headline */
.hero-slide.active{animation:ge-kenburns 22s ease-in-out infinite alternate;transform-origin:60% 40%}
.hero-slides::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 85% 10%,rgba(25,184,239,.20),transparent 55%),radial-gradient(80% 70% at 10% 100%,rgba(243,179,61,.16),transparent 60%)}
.hero h1 span,.hero h1 em,.hero h1 strong{background:linear-gradient(100deg,#6fe0ff 0%,#19b8ef 30%,#ffd47a 55%,#19b8ef 80%,#6fe0ff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ge-sheen 7s linear infinite}
.hero h1 span,.hero h1 em,.hero h1 strong{text-shadow:none!important;filter:drop-shadow(0 8px 24px rgba(0,0,0,.35))}
.catalog-hero{background-size:115% auto;animation:ge-drift 30s ease-in-out infinite alternate}

/* Cards: lift, glow and image zoom */
.product-card,.category-card,.recommended-card,.company-card,.why-card,.sector-card,.join-company-card,.news-card,.insight-card,.workspace-card,.freight-card,.portal-overview article,.shipment-card,.business-stats .stat,.dashboard-stats article{transition:transform .45s var(--ge-ease),box-shadow .45s var(--ge-ease),border-color .45s var(--ge-ease)}
.product-card:hover,.category-card:hover,.recommended-card:hover,.company-card:hover,.why-card:hover,.sector-card:hover,.join-company-card:hover,.news-card:hover,.insight-card:hover,.freight-card:hover,.portal-overview article:hover,.dashboard-stats article:hover{transform:translateY(-6px);box-shadow:var(--ge-shadow-lift);border-color:rgba(25,184,239,.45)}
.product-card img,.category-card img,.recommended-card img,.sector-card img,.news-card img{transition:transform 1.1s var(--ge-ease),filter .6s}
.product-card:hover img,.category-card:hover img,.recommended-card:hover img,.sector-card:hover img,.news-card:hover img{transform:scale(1.06);filter:saturate(1.08)}

/* Buttons: sheen sweep and press feedback */
.primary,.gold,.ge-cta,button[type=submit],.quick-actions button,.trade-portal,a.ge-portal{position:relative;overflow:hidden;isolation:isolate;transition:transform .25s var(--ge-ease),box-shadow .35s var(--ge-ease),filter .25s}
.primary::before,.gold::before,.ge-cta::before,button[type=submit]::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.38) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ge-ease)}
.primary:hover::before,.gold:hover::before,.ge-cta:hover::before,button[type=submit]:hover::before{transform:translateX(120%)}
.primary:hover,.gold:hover,.ge-cta:hover,button[type=submit]:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(7,80,173,.28)}
.primary:active,.gold:active,button[type=submit]:active{transform:translateY(0) scale(.98)}

/* Counters keep their width while counting */
.ge-count{font-variant-numeric:tabular-nums}

/* Portal and admin: soft entrance when switching tabs/modules */
.dash-view:not(.hidden),.business-module:not(.hidden),[id$="-module"]:not(.hidden){animation:ge-fade-up .45s var(--ge-ease) both}

/* Floating WhatsApp button breathes gently */
.whatsapp-float,.wa-float,[class*=whatsapp]{animation:ge-breathe 3.2s ease-in-out infinite}

@keyframes ge-kenburns{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
@keyframes ge-sheen{to{background-position:-220% 0}}
@keyframes ge-drift{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes ge-fade-up{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes ge-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}

@media (prefers-reduced-motion:reduce){
 .ge-reveal{opacity:1!important;transform:none!important;transition:none!important}
 .hero-slide.active,.catalog-hero,.hero h1 span,.hero h1 em,.hero h1 strong,.whatsapp-float,.wa-float,[class*=whatsapp],.dash-view,.business-module,[id$="-module"]{animation:none!important}
 .product-card:hover,.category-card:hover,.recommended-card:hover,.company-card:hover,.why-card:hover,.sector-card:hover{transform:none}
}