/* ============================================================ Codara | كودارا — cinematic layer (2026-07) Additive premium motion + depth on top of the Precision-Orbit identity: brand intro, hero aurora, cursor spotlight, magnetic CTAs, scroll parallax + reactor scrub, refined hover states. Contract: this file only ACTIVATES its heavy motion when carries `.motion` (set synchronously by the early inline script, and only when the user has NOT requested reduced motion). No-JS and reduced-motion users get the calm base site untouched. ============================================================ */ /* ------------------------------------------------------------ 0 · Motion hold — GSAP owns the hero entrance under .motion. Held elements start invisible; motion.js reveals them. A hard safety timer in motion.js reveals everything if GSAP never boots. ------------------------------------------------------------ */ html.motion .hero-in { opacity: 0; transform: translateY(26px); animation: none !important; } html.motion .hero-visual .orbit-logo { opacity: 0; transform: scale(0.92); animation: none !important; } html.motion .ol-c { animation: none !important; stroke-dashoffset: 150; } html.motion .ol-core { animation: none !important; transform: scale(0); } /* Fail-safe: once revealed, clear the holds completely */ html.motion .hero.revealed .hero-in, html.motion .hero.revealed .hero-visual .orbit-logo { opacity: 1; transform: none; } /* ------------------------------------------------------------ 1 · Brand intro overlay (first visit per session, non-reduced) ------------------------------------------------------------ */ .brand-intro { position: fixed; inset: 0; z-index: 999; display: none; place-items: center; background: radial-gradient(130% 90% at 50% 34%, #10233a 0%, var(--navy-950) 68%); overflow: hidden; --bi-ink: #ffffff; } html.intro .brand-intro { display: grid; } /* keep the page from scrolling under the overlay */ html.intro { overflow: hidden; } .brand-intro .bi-halo { position: absolute; width: min(78vmin, 620px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(34, 197, 94, 0.22), transparent 62%); filter: blur(40px); opacity: 0; transform: scale(0.7); } .brand-intro .bi-inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.5rem; } .brand-intro .bi-logo { width: clamp(96px, 22vmin, 148px); height: auto; overflow: visible; } .brand-intro .bi-c { stroke-dasharray: 150; stroke-dashoffset: 150; } .brand-intro .bi-core { transform-box: fill-box; transform-origin: center; transform: scale(0); } .brand-intro .bi-ring { transform-box: fill-box; transform-origin: center; opacity: 0; } .brand-intro .bi-word { display: inline-flex; align-items: baseline; gap: 0.7rem; font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.4rem); color: var(--bi-ink); opacity: 0; } .brand-intro .bi-word .en { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.03em; } .brand-intro .bi-word .bar { width: 1px; height: 1.05em; background: rgba(255, 255, 255, 0.32); align-self: center; } .brand-intro .bi-tagline { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.22em; text-transform: uppercase; color: var(--green-300); opacity: 0; } .brand-intro .bi-skip { position: absolute; bottom: 1.7rem; inset-inline-end: 1.7rem; z-index: 3; background: none; border: 0; cursor: pointer; font: 600 var(--fs-xs) var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); opacity: 0; transition: color var(--dur-fast) var(--ease); } .brand-intro .bi-skip:hover { color: var(--green-300); } /* ------------------------------------------------------------ 2 · Hero aurora — drifting atmosphere behind the copy/orbit (compositor-only: transform + opacity; sits under z-index:2 copy) ------------------------------------------------------------ */ .hero-aurora { position: absolute; inset: -25% -12% -20%; z-index: 0; pointer-events: none; overflow: hidden; } .hero-aurora .blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: 0.5; will-change: transform; } .hero-aurora .b-green { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; inset-block-start: -8%; inset-inline-start: 6%; background: radial-gradient(circle, rgba(34, 197, 94, 0.42), transparent 64%); } .hero-aurora .b-navy { width: 52vw; height: 52vw; max-width: 700px; max-height: 700px; inset-block-end: -22%; inset-inline-end: -6%; background: radial-gradient(circle, rgba(61, 110, 168, 0.5), transparent 66%); } .hero-aurora .b-gold { width: 26vw; height: 26vw; max-width: 340px; max-height: 340px; inset-block-start: 30%; inset-inline-end: 22%; background: radial-gradient(circle, rgba(212, 175, 55, 0.28), transparent 66%); } @media (prefers-reduced-motion: no-preference) { .hero-aurora .b-green { animation: auroraA 20s var(--ease) infinite alternate; } .hero-aurora .b-navy { animation: auroraB 26s var(--ease) infinite alternate; } .hero-aurora .b-gold { animation: auroraC 17s var(--ease) infinite alternate; } } @keyframes auroraA { to { transform: translate3d(6%, 8%, 0) scale(1.14); } } @keyframes auroraB { to { transform: translate3d(-7%, -6%, 0) scale(1.12); } } @keyframes auroraC { to { transform: translate3d(4%, -10%, 0) scale(0.88); opacity: 0.55; } } /* cursor parallax offset written by motion.js — layered on top of the drift */ html.motion .hero .orbit-field, html.motion .page-head .orbit-field { transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform 0.5s var(--ease); } html.motion .hero-aurora { transform: translate3d(var(--ax, 0px), var(--ay, 0px), 0); transition: transform 0.6s var(--ease); } /* the hero orbit logo gets a live green core glow */ .hero-visual .orbit-logo .ol-core { filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.65)); } @media (prefers-reduced-motion: no-preference) { html.motion .hero-visual .orbit-logo.revealed .ol-core { animation: corePulse 3.2s ease-in-out infinite; } } @keyframes corePulse { 0%, 100% { filter: drop-shadow(0 0 8px rgba(34, 197, 94, 0.5)); } 50% { filter: drop-shadow(0 0 20px rgba(34, 197, 94, 0.9)); } } /* ------------------------------------------------------------ 3 · Kinetic verbs — accent bar sweeps in under motion ------------------------------------------------------------ */ html.motion .hero-verbs .verb::after { transform: scaleX(var(--barScale, 1)); transform-origin: right center; } /* ------------------------------------------------------------ 4 · Cursor spotlight — premium light-follows-you on dark cards & the reactor stage. --mx/--my set by motion.js per element. ------------------------------------------------------------ */ .div-card, .pkg-card, .case-card, .reactor-stage, .apk-visual { --mx: 50%; --my: 50%; } .div-card::after, .pkg-card::after, .case-card::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(240px circle at var(--mx) var(--my), var(--spot, rgba(34, 197, 94, 0.16)), transparent 62%); opacity: 0; transition: opacity 0.4s var(--ease); } .div-card > *, .pkg-card > *, .case-card > * { position: relative; z-index: 1; } @media (pointer: fine) { .div-card:hover::after, .pkg-card:hover::after, .case-card:hover::after { opacity: 1; } } /* per-family + product spotlight tints */ .div-card.fam-navy { --spot: rgba(61, 110, 168, 0.20); } .div-card.fam-gold { --spot: rgba(212, 175, 55, 0.18); } .case-apk { --spot: rgba(90, 120, 255, 0.22); } .case-brand { --spot: rgba(34, 197, 94, 0.20); } .pkg-card.featured { --spot: rgba(34, 197, 94, 0.22); } /* reactor stage: a soft green glow tracks the pointer over the grid */ .reactor-stage::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(34, 197, 94, 0.10), transparent 60%); opacity: 0; transition: opacity 0.5s var(--ease); } @media (pointer: fine) { .reactor-stage:hover::before { opacity: 1; } } .reactor-stage > * { position: relative; z-index: 1; } /* ------------------------------------------------------------ 5 · Magnetic CTAs — motion.js nudges [data-magnetic] toward the pointer; CSS just prepares the compositor + inner spring. ------------------------------------------------------------ */ @media (pointer: fine) { [data-magnetic] { will-change: transform; } } /* sheen sweep across primary growth buttons on hover */ .btn-growth { position: relative; overflow: hidden; isolation: isolate; } .btn-growth::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%); transform: translateX(-140%); transition: transform 0.6s var(--ease); } @media (pointer: fine) and (prefers-reduced-motion: no-preference) { .btn-growth:hover::before { transform: translateX(140%); } } /* ------------------------------------------------------------ 6 · Header — condenses + gains a glow line once you scroll ------------------------------------------------------------ */ .site-header { transition: background var(--dur-slow) var(--ease), box-shadow var(--dur-slow) var(--ease), border-color var(--dur-slow) var(--ease); } .site-header.scrolled { background: rgba(6, 13, 22, 0.9); box-shadow: 0 10px 34px rgba(2, 8, 20, 0.4); border-bottom-color: rgba(34, 197, 94, 0.18); } .site-header::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.55), transparent); opacity: 0; transition: opacity var(--dur-slow) var(--ease); } .site-header.scrolled::after { opacity: 1; } /* ------------------------------------------------------------ 7 · Card lift — deeper, springier under motion ------------------------------------------------------------ */ @media (pointer: fine) { .div-card, .case-card, .pkg-card { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .div-card:hover, .case-card:hover { transform: translateY(-6px); } } /* division-card arrow drifts on hover */ .div-card .go { transition: letter-spacing var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } .div-card:hover .go { color: var(--green-700); } /* ------------------------------------------------------------ 8 · Scroll parallax helpers (transforms written by motion.js) ------------------------------------------------------------ */ html.motion [data-parallax] { will-change: transform; } /* giant footer wordmark drifts horizontally with scroll */ html.motion .footer-word { will-change: transform; } /* ------------------------------------------------------------ 10 · Hero particle constellation (canvas, injected by motion.js) Sits above the aurora/orbit lines, below the copy (z-index 2). ------------------------------------------------------------ */ .hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* ------------------------------------------------------------ 11 · Scroll-progress bar (injected) — fills right→left in RTL ------------------------------------------------------------ */ .scroll-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 200; transform: scaleX(0); transform-origin: right center; background: linear-gradient(90deg, var(--green-500), var(--gold-500)); box-shadow: 0 0 10px rgba(34, 197, 94, 0.5); will-change: transform; } /* ------------------------------------------------------------ 12 · Reactor scrollytelling — pinned; caption pill (injected) ------------------------------------------------------------ */ .reactor-caption { position: absolute; top: 0.9rem; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 90%; z-index: 4; display: inline-flex; align-items: center; gap: 0.6rem; background: rgba(13, 27, 42, 0.92); border: 1px solid rgba(34, 197, 94, 0.32); border-radius: var(--radius-pill); padding: 0.42em 1.1em; opacity: 0; transform: translateY(-8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); pointer-events: none; } .reactor-sec.scrolly .reactor-caption { opacity: 1; transform: none; } .reactor-caption .rc-count { font-family: var(--font-mono); font-weight: 600; color: var(--green-300); font-size: 0.95rem; } .reactor-caption .rc-text { color: #fff; font-size: var(--fs-sm); font-weight: 600; } /* ------------------------------------------------------------ 13 · Custom orbit cursor (desktop fine-pointer, injected) ------------------------------------------------------------ */ html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor [role="button"], html.has-cursor .chip, html.has-cursor label, html.has-cursor summary, html.has-cursor .b-item, html.has-cursor [data-magnetic] { cursor: none; } html.has-cursor input, html.has-cursor textarea, html.has-cursor select, html.has-cursor [contenteditable] { cursor: auto; } .cursor-ring, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 300; mix-blend-mode: normal; transition: opacity 0.25s var(--ease); } .cursor-ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 1.5px solid rgba(34, 197, 94, 0.85); border-radius: 50%; scale: 1; transition: scale 0.24s var(--ease), border-color 0.24s var(--ease), background-color 0.24s var(--ease), opacity 0.25s var(--ease); } .cursor-ring.hover { scale: 1.75; border-color: rgba(34, 197, 94, 0.5); background: rgba(34, 197, 94, 0.08); } .cursor-ring.down { scale: 0.82; } .cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--green-500); } /* ------------------------------------------------------------ 14 · Section-number decode (scramble) — flavor tint while running ------------------------------------------------------------ */ .sec-no.scrambling { color: var(--green-600); } /* ------------------------------------------------------------ 15 · Page transition — orbit wipe on internal navigation (injected) ------------------------------------------------------------ */ .page-wipe { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: radial-gradient(120% 90% at 50% 40%, #10233a 0%, var(--navy-950) 70%); transform: translateY(100%); pointer-events: none; will-change: transform; } .page-wipe.cover { transform: translateY(0); transition: transform 0.5s var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)); pointer-events: auto; } .page-wipe .pw-mark { width: 84px; height: 84px; opacity: 0; transform: scale(0.7); } .page-wipe.cover .pw-mark { opacity: 1; transform: scale(1); transition: opacity 0.4s 0.18s var(--ease), transform 0.5s 0.15s var(--ease); } .page-wipe .pw-core { filter: drop-shadow(0 0 12px rgba(34, 197, 94, 0.7)); } /* ------------------------------------------------------------ 16 · Language toggle button (injected into the nav) ------------------------------------------------------------ */ .lang-toggle { min-width: 40px; padding: 0.4em 0.75em; border-radius: var(--radius-pill); border: 1.5px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.05); color: var(--navy-100); font: 600 var(--fs-sm) var(--font-mono); letter-spacing: 0.04em; cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); margin-inline-start: 0.35rem; } .lang-toggle:hover { color: #fff; background: rgba(34, 197, 94, 0.16); border-color: rgba(34, 197, 94, 0.4); } @media (max-width: 820px) { .lang-toggle { align-self: flex-start; margin: 0.3rem 0 0; } } /* English mode — restore a little Latin tracking + left-align defaults */ html[lang="en"] .eyebrow, html[lang="en"] .sec-head .sec-no { letter-spacing: 0.08em; } html[lang="en"] .hero-verbs { letter-spacing: -0.02em; } /* ------------------------------------------------------------ 17 · Divisions — de-flatten with example-service tags + bento feature ------------------------------------------------------------ */ .div-card .dv-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.9rem 0 0.2rem; } .div-card .dv-tags span { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); background: var(--gray-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); padding: 0.2em 0.75em; } .fam-green .dv-tags span { color: var(--green-700); background: var(--green-100); border-color: transparent; } .fam-navy .dv-tags span { color: var(--navy-700); background: var(--navy-100); border-color: transparent; } .fam-gold .dv-tags span { color: var(--gold-600); background: var(--gold-100); border-color: transparent; } /* the flagship (tech) card spans two columns on wide screens = editorial rhythm */ @media (min-width: 861px) { .div-grid { grid-template-columns: repeat(3, 1fr); } .div-card.div-feature { grid-column: span 2; display: flex; flex-direction: column; } .div-card.div-feature .foot { margin-top: auto; } } /* ------------------------------------------------------------ 18 · Process — "كيف نشتغل" four-step orbit timeline ------------------------------------------------------------ */ .process { padding-block: var(--section) 0; } .proc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; counter-reset: step; } .proc-step { position: relative; padding: 1.6rem 1.4rem 1.5rem; border-radius: var(--radius-lg); background: var(--surface-card); border: 1px solid var(--border-subtle); overflow: hidden; } .proc-step .pn { font-family: var(--font-mono); font-weight: 600; font-size: 1.05rem; color: var(--navy-900); width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--green-100); border: 1px solid rgba(34, 197, 94, 0.3); margin-bottom: 1rem; } .proc-step h3 { font-size: var(--fs-h3); margin: 0 0 0.4rem; } .proc-step p { font-size: var(--fs-sm); color: var(--text-muted); margin: 0; } .proc-step::after { content: ""; position: absolute; inset-block-start: 2.45rem; inset-inline-start: -0.6rem; width: 1.2rem; height: 2px; background: linear-gradient(90deg, transparent, var(--green-500)); } .proc-step:first-child::after { display: none; } @media (max-width: 860px) { .proc-grid { grid-template-columns: repeat(2, 1fr); } .proc-step::after { display: none; } } @media (max-width: 480px) { .proc-grid { grid-template-columns: 1fr; } } /* ------------------------------------------------------------ 19 · FAQ — accordion (native
) with orbit accent ------------------------------------------------------------ */ .faq { padding-block: var(--section) 0; } .faq-list { display: grid; gap: 0.75rem; max-width: 820px; } .faq-item { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); overflow: hidden; transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .faq-item[open] { border-color: rgba(34, 197, 94, 0.4); box-shadow: var(--shadow-sm); } .faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.3rem; font-weight: 600; color: var(--text-strong); font-size: var(--fs-lead); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::before { content: "+"; font-family: var(--font-mono); font-weight: 600; font-size: 1.3rem; color: var(--green-600); flex: none; width: 1.2em; text-align: center; transition: transform var(--dur-base) var(--ease); } .faq-item[open] summary::before { content: "−"; } .faq-item .faq-a { padding: 0 1.3rem 1.2rem 3.4rem; color: var(--text-body); font-size: var(--fs-body); margin: 0; } html[dir="ltr"] .faq-item .faq-a { padding: 0 3.4rem 1.2rem 1.3rem; } /* ------------------------------------------------------------ 9 · Reduced motion — hard stop for every optional effect ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .brand-intro { display: none !important; } html.intro { overflow: auto; } .hero-aurora .blob { animation: none; } .div-card::after, .pkg-card::after, .case-card::after, .reactor-stage::before, .btn-growth::before { display: none; } .hero-visual .orbit-logo.revealed .ol-core { animation: none; } .hero-particles, .scroll-progress, .reactor-caption, .cursor-ring, .cursor-dot, .page-wipe { display: none !important; } html.has-cursor, html.has-cursor a, html.has-cursor button { cursor: auto !important; } }