/* Homepage art direction, using the original InfinityX identity and content. */
.home-page .hero-new { min-height:94vh; padding:160px 0 70px; overflow:hidden; }
.home-page .hero-new .hero-overlay { background:linear-gradient(90deg,rgba(9,15,25,.86) 0%,rgba(9,15,25,.73) 33%,rgba(9,15,25,.22) 68%,rgba(9,15,25,.06) 100%) !important; }
.home-page .hero-new::before { background:none; }
.home-page .hero-new .hero-shell.hero-content { padding:32px 38px; gap:24px; }
.home-page .hero-heading { font-size:clamp(3rem,5.5vw,5.2rem); max-width:760px; line-height:1.03; font-weight:700; letter-spacing:-.055em; }
.home-page .hero-brand-line { display:block; color:#e6c978; }
.home-page .hero-subtitle-new { max-width:610px; font-size:1.06rem; line-height:1.8; }
.home-page .eyebrow { display:flex; align-items:center; gap:14px; font-size:.75rem; letter-spacing:.2em; }
.home-page .eyebrow::before { content:""; width:32px; height:2px; background:var(--gold); flex-shrink:0; }
.home-page .hero-badges { max-width:660px; gap:8px; }
.home-page .hero-badges .badge { font-size:.72rem; padding:8px 11px; background:rgba(15,23,39,.68); backdrop-filter:blur(8px); }
.home-page .hero-new .fade-in-up { opacity:1; transform:none; transition:none; animation:ix-hero-arrive .75s both; }
.home-page .hero-new .delay-1 { animation-delay:.08s; }
.home-page .hero-new .delay-2 { animation-delay:.16s; }
.home-page .hero-new .delay-3 { animation-delay:.24s; }
.home-page .hero-new .delay-4 { animation-delay:.32s; }
@keyframes ix-hero-arrive { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.home-page .ix-blueprint { right:5%; top:auto; bottom:70px; width:245px; height:290px; opacity:1; z-index:4; border:1px solid rgba(235,205,126,.4); border-radius:20px; padding:15px; background:linear-gradient(135deg,rgba(17,24,39,.65),rgba(17,24,39,.22)); backdrop-filter:blur(6px); box-shadow:0 14px 45px rgba(0,0,0,.2); perspective:700px; }
.home-page .ix-blueprint svg { animation:ix-model-orbit 7s ease-in-out infinite; transform-origin:50% 55%; filter:drop-shadow(0 0 3px rgba(212,175,55,.35)); }
.home-page .ix-blueprint .draw { animation:ix-model-draw 9s ease-in-out infinite; }
.home-page .ix-blueprint circle { animation:ix-node-pulse 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.home-page .ix-blueprint circle:nth-child(2n) { animation-delay:1.4s; }
.home-page .ix-blueprint::after { content:""; position:absolute; left:15px; right:15px; top:20%; height:1px; background:linear-gradient(90deg,transparent,#f3dc93,transparent); box-shadow:0 0 12px rgba(243,220,147,.7); animation:ix-scan 4s ease-in-out infinite; }
@keyframes ix-model-orbit { 0%,100% {transform:rotateY(-14deg) rotateZ(-2deg) translateY(0);} 50% {transform:rotateY(16deg) rotateZ(2deg) translateY(-7px);} }
@keyframes ix-model-draw { 0% {stroke-dashoffset:1800;opacity:.3;} 35%,85% {stroke-dashoffset:0;opacity:1;} 100% {stroke-dashoffset:0;opacity:.3;} }
@keyframes ix-node-pulse { 0%,100% {opacity:.45;transform:scale(.85);} 50% {opacity:1;transform:scale(1.7);} }
@keyframes ix-scan { 0%,100% {top:18%;opacity:0;} 15%,85% {opacity:.7;} 50% {top:84%;} }
.ix-motion-toggle { position:absolute; right:5%; bottom:28px; z-index:5; color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:30px; background:rgba(17,24,39,.6); padding:8px 14px; font:inherit; font-size:.72rem; cursor:pointer; }
.home-page .stats-section { position:relative; z-index:5; padding:35px 0; background:#111827; border-top:1px solid rgba(212,175,55,.35); }
.home-page .stat-card { background:transparent; border:0; border-radius:0; box-shadow:none; border-right:1px solid rgba(212,175,55,.2); }
.home-page .stat-card:last-child { border-right:0; }
.home-page .stat-number { color:#e6c978; }
.home-page .stat-label { color:#dce0e9; }
.home-page .services-preview-section { background:radial-gradient(ellipse at 0 0,#f5eddb,transparent 45%),#f7f8fa; padding:100px 0; }
.home-page .services-preview-section .service-card { position:relative; overflow:hidden; background:linear-gradient(145deg,#fff,#fcfaf5); padding:32px; border:1px solid #e8e2d4; }
.home-page .services-preview-section .service-card::before { content:attr(data-service-number); position:absolute; left:auto; right:22px; top:20px; width:auto; height:auto; background:none; opacity:1; transform:none; color:rgba(184,148,31,.15); font:600 3.7rem var(--font-heading); pointer-events:none; }
.home-page .services-preview-section .service-icon { width:68px; height:68px; font-size:2.3rem; margin-bottom:24px; }
.home-page .service-card h3 { font-size:1.3rem; }
.home-page .service-card:hover { border-color:rgba(184,148,31,.65) !important; }
.home-page .process-section { background:#111827; position:relative; }
.home-page .process-section .section-title,.home-page .process-section h3 { color:#fff; }
.home-page .process-section .section-subtitle,.home-page .process-section p { color:#c8ced8; }
.home-page .process-step { position:relative; background:#1b2434; border-color:rgba(212,175,55,.22); box-shadow:none; text-align:left; }
.home-page .process-step:hover { background:#202c40; }
.home-page .printing-section { background:linear-gradient(120deg,#faf8f2,#eef0f5); }
.home-page .cta-section { background:radial-gradient(ellipse at 85% 20%,rgba(212,175,55,.2),transparent 50%),#111827; }
.home-page .ix-motion-paused *, .home-page.ix-motion-paused * { animation-play-state:paused !important; }
@media(min-width:1100px) { .home-page .services-preview-section .services-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1099px) { .home-page .ix-blueprint,.ix-motion-toggle { display:none; } .home-page .hero-new .hero-overlay { background:linear-gradient(90deg,rgba(9,15,25,.8),rgba(9,15,25,.4)) !important; } }
@media(max-width:600px) { .home-page .hero-new { min-height:auto; padding:120px 0 45px; } .home-page .hero-new .hero-shell.hero-content { padding:20px 16px; gap:22px; } .home-page .hero-heading { font-size:2.9rem; } .home-page .eyebrow { font-size:.61rem; letter-spacing:.13em; } .home-page .hero-subtitle-new { font-size:.94rem; } .home-page .hero-badges { gap:6px; } .home-page .hero-badges .badge { font-size:.65rem; padding:7px 8px; } .home-page .services-preview-section { padding:65px 0; } .home-page .stats-section { padding:20px 0; } .home-page .stat-card { padding:14px 6px; } }
@media(prefers-reduced-motion:reduce) { .home-page .ix-blueprint svg,.home-page .ix-blueprint .draw,.home-page .ix-blueprint circle,.home-page .ix-blueprint::after,.home-page .hero-new .fade-in-up { animation:none !important; } .home-page .ix-blueprint .draw { stroke-dashoffset:0; stroke-dasharray:none; } .ix-motion-toggle { display:none; } }
@media(max-width:600px) { .home-page .hero-new .hero-overlay { background:linear-gradient(90deg,rgba(9,15,25,.67),rgba(9,15,25,.25)) !important; } .home-page .hero-slide-image { filter:brightness(1.12); } }
@media(min-width:900px) and (max-width:1099px) { .home-page .ix-blueprint { display:block; width:185px; height:225px; right:3%; bottom:65px; } .home-page .ix-motion-toggle { display:block; right:3%; bottom:25px; } .home-page .hero-badges { max-width:550px; } .home-page .hero-subtitle-new { max-width:550px; } .home-page .hero-heading { max-width:650px; } }
/* CINEMA: UAE AFTER DARK — the films take the full stage. */
.cinema-hero { position:relative; min-height:720px; height:100svh; max-height:1200px; overflow:hidden; background:#080c14; color:#fff; display:flex; align-items:center; padding:180px 0 175px; isolation:isolate; }
.cinema-media { position:absolute; inset:0; z-index:-2; }
.cinema-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease; }
.cinema-video.active { opacity:1; }
.cinema-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,10,17,.7) 0%,rgba(6,10,17,.4) 35%,rgba(6,10,17,.02) 70%),linear-gradient(0deg,rgba(6,10,17,.86),transparent 33%,transparent 70%,rgba(6,10,17,.3)); }
.cinema-copy { width:100%; position:relative; z-index:1; padding-left:clamp(28px,5vw,90px); padding-right:28px; }
.cinema-eyebrow { color:#ead7a4; letter-spacing:.17em; text-transform:uppercase; font-size:.68rem; margin-bottom:28px; }
.cinema-heading { font:500 clamp(3.7rem,6.6vw,6.5rem)/.98 var(--font-heading); letter-spacing:-.06em; max-width:810px; margin:0 0 26px; color:white; }
.cinema-heading>span { display:block; }
.cinema-heading em { font-style:normal; color:#e8ce8f; }
.cinema-heading small { display:block; font-size:.22em; letter-spacing:.21em; text-transform:uppercase; margin-top:24px; color:#f3e9d4; }
.cinema-description { max-width:480px; font-size:.92rem; line-height:1.85; color:#e0e1e4; margin:0 0 28px; text-shadow:0 1px 4px rgba(0,0,0,.4); }
.cinema-actions { display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.cinema-actions .btn { border-radius:2px; font-size:.72rem; padding:17px 22px; box-shadow:none; display:flex; gap:26px; align-items:center; }
.cinema-actions .btn span { font-size:1.3rem; }
.cinema-contact { color:white; font-size:.8rem; padding:12px 0; border-bottom:1px solid rgba(230,207,147,.6); }
.cinema-contact span { margin-left:16px; color:#e8ce8f; }
.cinema-edition { position:absolute; right:5%; top:155px; display:flex; flex-direction:column; gap:8px; font-size:.6rem; letter-spacing:.22em; text-align:right; color:#eee3c8; }
.cinema-edition span:last-child { color:#c6c4c0; }
.cinema-location { position:absolute; right:5%; bottom:205px; text-align:right; display:flex; flex-direction:column; border-right:1px solid #e8ce8f; padding-right:20px; gap:7px; }
.cinema-location-city { font-size:.6rem; letter-spacing:.22em; color:#e8ce8f; }
.cinema-location-name { font:500 1.2rem var(--font-heading); }
.cinema-bottom { position:absolute; bottom:60px; left:0; right:0; display:flex; align-items:center; gap:28px; padding:0 clamp(28px,5vw,90px); max-width:none; }
.cinema-chapters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; width:100%; max-width:1050px; }
.cinema-chapter { position:relative; display:flex; align-items:center; gap:18px; padding:17px 0 20px; border:0; border-top:1px solid rgba(255,255,255,.3); background:none; color:#fff; text-align:left; cursor:pointer; font:inherit; opacity:.57; transition:opacity .25s; }
.cinema-chapter:hover,.cinema-chapter.active { opacity:1; }
.cinema-chapter-number { font:300 1.5rem var(--font-heading); color:#e8ce8f; }
.cinema-chapter small { display:block; font-size:.52rem; letter-spacing:.22em; margin-bottom:7px; color:#e6d9b9; }
.cinema-chapter strong { font-size:.8rem; font-weight:500; }
.cinema-chapter i { position:absolute; top:-1px; left:0; width:var(--film-progress,0%); height:2px; background:#e8ce8f; transition:width .25s linear; }
.cinema-pause { flex-shrink:0; width:40px; height:40px; border:1px solid rgba(230,207,147,.5); color:#e8ce8f; border-radius:50%; background:rgba(8,12,20,.3); cursor:pointer; font:inherit; }
.cinema-film-note { position:absolute; right:5%; bottom:23px; color:#bdbbb6; font-size:.52rem; letter-spacing:.08em; }
.cinema-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.cinema-expertise { display:flex; overflow:hidden; gap:0; background:#e5ca89; color:#111827; padding:22px 0; }
.cinema-expertise-track { flex-shrink:0; display:flex; align-items:center; gap:36px; padding-right:36px; animation:ix-expertise-rail 40s linear infinite; }
.cinema-expertise-track span { white-space:nowrap; font:500 .85rem var(--font-heading); letter-spacing:.03em; }
.cinema-expertise-track span::after { content:"✦"; margin-left:36px; font-size:.6rem; }
@keyframes ix-expertise-rail { to{transform:translateX(-100%);} }
.cinema-expertise:hover .cinema-expertise-track { animation-play-state:paused; }
.home-page .services-preview-section .section-title { text-align:left; max-width:650px; font-size:clamp(2.5rem,4.5vw,4.5rem); }
.home-page .services-preview-section .section-subtitle { text-align:left; margin-left:0; }
@media(min-width:1100px) { .home-page .services-preview-section .service-card:nth-child(1),.home-page .services-preview-section .service-card:nth-child(4),.home-page .services-preview-section .service-card:nth-child(6) { grid-column:span 2; } }
@media(max-width:1100px) { .cinema-hero { min-height:760px; } .cinema-heading { font-size:4.9rem; max-width:600px; } .cinema-description { max-width:430px; } .cinema-location { bottom:195px; } .cinema-chapters { gap:18px; } }
@media(max-width:700px) { .cinema-hero { min-height:850px; height:100svh; padding:150px 0 210px; align-items:flex-start; } .cinema-copy { padding:0 23px; } .cinema-heading { font-size:clamp(3rem,12.5vw,4.5rem); max-width:100%; } .cinema-eyebrow { font-size:.56rem; line-height:1.7; letter-spacing:.13em; max-width:260px; margin-bottom:24px; } .cinema-description { font-size:.83rem; max-width:320px; margin-top:28px; } .cinema-edition { display:none; } .cinema-heading small { font-size:.25em; } .cinema-actions { gap:18px; } .cinema-actions .btn { padding:14px 16px; font-size:.6rem; gap:10px; } .cinema-contact { font-size:.73rem; } .cinema-location { bottom:170px; right:23px; } .cinema-location-name { font-size:.9rem; } .cinema-bottom { bottom:45px; padding:0 23px; gap:12px; align-items:flex-end; } .cinema-chapters { gap:12px; } .cinema-chapter { display:block; padding:12px 0 14px; } .cinema-chapter-number { display:block; font-size:1.1rem; margin-bottom:8px; } .cinema-chapter small { font-size:.45rem; } .cinema-chapter strong { font-size:.61rem; line-height:1.4; display:block; } .cinema-pause { width:30px; height:30px; margin-bottom:14px; font-size:.75rem; } .cinema-film-note { right:23px; bottom:16px; font-size:.46rem; } .cinema-shade { background:linear-gradient(90deg,rgba(6,10,17,.65),rgba(6,10,17,.15)),linear-gradient(0deg,rgba(6,10,17,.85),transparent 40%,rgba(6,10,17,.2)); } .home-page .services-preview-section .section-title { font-size:2.5rem; } }
@media(prefers-reduced-motion:reduce) { .cinema-video,.cinema-chapter,.cinema-chapter i { transition:none; } .cinema-expertise-track { animation:none; } .cinema-expertise-track[aria-hidden] { display:none; } .cinema-expertise { overflow-x:auto; } }
@media(min-width:701px) and (max-height:820px) { .cinema-hero { padding:150px 0 150px; } .cinema-heading { font-size:4rem; margin-bottom:20px; } .cinema-heading small { margin-top:18px; } .cinema-eyebrow { margin-bottom:20px; } .cinema-description { font-size:.82rem; max-width:460px; line-height:1.7; margin-bottom:23px; } .cinema-bottom { bottom:30px; } .cinema-location { bottom:140px; } .cinema-film-note { bottom:8px; } }
