/* Cinematic engineering layer — inspired by editorial portfolio motion, adapted for Al-Ghazali. */
:root { --cine-ink:#091d40; --cine-electric:#85c3ff; --cine-acid:#d4f2a1; }
.design-v2.portfolio-home #home { isolation:isolate; }
.design-v2.portfolio-home #home .hero-copy { position:relative; }
.cine-masthead { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin:0 0 28px; width:min(100%,600px); font:600 10px/1.5 'Space Mono',monospace; color:#d9eaff; letter-spacing:.12em; text-transform:uppercase; }
.cine-masthead::before { content:"✳"; display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid #d1e5ff77; border-radius:50%; color:var(--cine-acid); font:25px/1 Georgia,serif; flex:none; }
.cine-masthead span:last-child { margin-left:auto; color:#c3d9f2aa; }
.design-v2.portfolio-home .hero-title { position:relative; z-index:1; }
.design-v2.portfolio-home .ht-line { text-wrap:balance; }
.design-v2.portfolio-home .ht-line.ht-accent { filter:drop-shadow(0 18px 28px #04246a31); }
.design-v2.portfolio-home .hero-grid::after { content:""; position:absolute; inset:auto 1% -10px auto; width:min(32vw,300px); height:1px; background:linear-gradient(90deg,transparent,#d5e8ff55); pointer-events:none; }
.cine-scene-tag { position:absolute; inset:auto 3% 10px auto; z-index:4; pointer-events:none; color:#cae2ff; font:9px/1.6 'Space Mono',monospace; letter-spacing:.13em; text-align:right; max-width:190px; }
.cine-scene-tag::before { content:"◎"; font:16px Georgia,serif; margin-right:8px; color:var(--cine-acid); }
.design-v2 .cine-overline { display:flex; gap:12px; align-items:center; margin:0 0 12px; color:#356cba; font:600 10px/1.5 'Space Mono',monospace; letter-spacing:.15em; text-transform:uppercase; }
.design-v2 .surface-dark .cine-overline, .design-v2 .surface-blue .cine-overline { color:#a6caff; }
.design-v2 .cine-overline::before { content:""; width:23px; height:1px; background:currentColor; flex:none; }
.design-v2.portfolio-home #about .about-photo { transform-origin:50% 75%; transition:clip-path .65s cubic-bezier(.22,1,.36,1),box-shadow .4s; clip-path:polygon(0 0,100% 0,100% 95%,94% 100%,0 100%); }
.design-v2.portfolio-home #about .about-photo:hover { clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }
.design-v2.portfolio-home .xp-card { position:relative; transition:background .35s, padding-inline .35s; }
.design-v2.portfolio-home .xp-card::before { content:""; position:absolute; left:0; top:0; width:0; height:2px; background:#2865ca; transition:width .45s cubic-bezier(.22,1,.36,1); }
.design-v2.portfolio-home .xp-card:hover::before, .design-v2.portfolio-home .xp-card:focus-within::before { width:100%; }
.design-v2.portfolio-home .project-card .project-media { overflow:hidden; }
.design-v2.portfolio-home .project-card .project-media img { transition:transform .7s cubic-bezier(.22,1,.36,1), filter .55s; }
.design-v2.portfolio-home .proj-slide.is-center .project-card:hover .project-media img { transform:scale(1.035); }
.design-v2.portfolio-home .proj-slide.is-center .project-card { outline:1px solid #c1e2ff2b; outline-offset:0; }
.design-v2.portfolio-home .proj-slide.is-center .project-copy h3 { text-wrap:balance; }
.cine-project-index { display:flex; align-items:center; gap:13px; justify-content:center; margin:16px auto 0; font:11px/1.3 'Space Mono',monospace; letter-spacing:.15em; color:#c2d5ef; font-variant-numeric:tabular-nums; }
.cine-project-index strong { color:var(--cine-acid); font-size:13px; }
.cine-project-index i { display:inline-block; width:50px; height:1px; background:#a5c6ee55; }
.cine-project-index small { color:#9eb7d9; font-size:10px; letter-spacing:.06em; }
.cine-ticker { background:#ccedff; color:#082349; overflow:hidden; padding:14px 0; border-block:1px solid #7bbce733; }
.cine-ticker-viewport { display:flex; width:max-content; animation:cine-marquee 29s linear infinite; }
.cine-ticker:hover .cine-ticker-viewport { animation-play-state:paused; }
.cine-ticker-content { display:flex; flex:none; align-items:center; gap:34px; padding-inline:17px; white-space:nowrap; font:700 clamp(14px,1.5vw,19px)/1.25 'Space Grotesk',sans-serif; letter-spacing:-.02em; text-transform:uppercase; }
.cine-ticker-content b { color:#2564bd; font:400 22px/1 'Instrument Serif',Georgia,serif; }
@keyframes cine-marquee { to { transform:translateX(-50%); } }
.cine-contact-intro { display:grid; grid-template-columns: minmax(0,1.3fr) minmax(220px,.7fr); gap:24px; align-items:end; margin:16px 0 36px; padding:12px 0 26px; border-bottom:1px solid #b9d8ff35; }
.cine-contact-intro h3 { margin:0; color:#f6faff!important; font:700 clamp(34px,5.3vw,76px)/.99 'Space Grotesk',sans-serif; letter-spacing:-.065em; max-width:740px; text-wrap:balance; }
.cine-contact-intro h3 em { font:italic 400 1.12em/.95 'Instrument Serif',Georgia,serif; letter-spacing:-.02em; color:var(--cine-acid); }
.cine-contact-side { display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.cine-contact-side p { margin:0; max-width:300px; font:400 13px/1.75 Inter,sans-serif; color:#b6cee8!important; }
.cine-contact-side a { display:inline-flex; align-items:center; gap:12px; min-height:48px; padding:12px 19px; background:var(--cine-acid); border:1px solid #d4f2a1; border-radius:6px; color:#081b34; font:700 11px/1.4 'Space Mono',monospace; letter-spacing:.02em; text-decoration:none; transition:background .25s,translate .2s; }
.cine-contact-side a:hover { background:#efffc7; }
.cine-contact-side a:focus-visible { outline:2px solid #fff; outline-offset:4px; }
.cine-reader { position:fixed; z-index:95; right:16px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:14px; align-items:center; padding:16px 11px; border:1px solid #abd0ff30; border-radius:100px; background:#071c3bd9; box-shadow:0 16px 38px #071c3b29; backdrop-filter:blur(16px); }
.cine-reader a { display:flex; align-items:center; justify-content:center; width:23px; height:23px; border:1px solid transparent; border-radius:50%; color:#d8e7fb; font:600 9px 'Space Mono',monospace; text-decoration:none; transition:color .2s,background .2s,border-color .2s,scale .2s; }
.cine-reader a::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.6; }
.cine-reader a span { position:absolute; right:38px; background:#071c3be8; padding:6px 10px; border-radius:4px; font:10px 'Space Mono',monospace; white-space:nowrap; opacity:0; visibility:hidden; transform:translateX(6px); transition:opacity .2s,transform .2s; pointer-events:none; }
.cine-reader a:hover span, .cine-reader a:focus-visible span { opacity:1; visibility:visible; transform:translateX(0); }
.cine-reader a:hover, .cine-reader a:focus-visible { color:#fff; border-color:#b9dfff66; }
.cine-reader a[aria-current="location"] { color:#061d3b; background:var(--cine-acid); border-color:var(--cine-acid); scale:1.07; }
.cine-reader a[aria-current="location"]::before { opacity:1; }
.cine-reader .cine-reader-rule { width:1px; height:22px; background:linear-gradient(#d8ebff55,transparent); }
.design-v2 .hero-actions .btn { transition:background .25s,border-color .25s,box-shadow .25s,translate .18s ease; translate:var(--cine-x,0px) var(--cine-y,0px); }
.design-v2.project-case { --cine-case-accent:#9bbfff; }
.design-v2.case-news2 { --cine-case-accent:#55bdd0; --cine-case-glow:#7adae71b; }
.design-v2.case-watering { --cine-case-accent:#95b76d; --cine-case-glow:#a6d07423; }
.design-v2.case-antenna { --cine-case-accent:#f2bd73; --cine-case-glow:#89b5ff26; }
.design-v2.project-case main { overflow:clip; }
.design-v2.project-case main > section { position:relative; }
.design-v2.project-case main > section:nth-child(even) { background-image:linear-gradient(150deg,var(--cine-case-glow,#91b8ff12),transparent 48%); }
.design-v2.project-case .cine-case-marker { display:inline-flex; align-items:center; gap:10px; margin:0 0 18px; padding:8px 11px; border:1px solid currentColor; border-radius:3px; color:var(--cine-case-accent); font:700 10px/1.4 'Space Mono',monospace; letter-spacing:.13em; text-transform:uppercase; }
.design-v2.project-case .cine-case-marker::before { content:"✳"; font:16px/1 Georgia,serif; }
.design-v2.project-case .section-label { color:var(--cine-case-accent); letter-spacing:.17em; }
.design-v2.project-case :is(.image-frame,.hero-media,figure) img { transition:transform .7s cubic-bezier(.22,1,.36,1); }
@media (hover:hover) and (pointer:fine) { .design-v2.project-case :is(.image-frame,.hero-media):hover img { transform:scale(1.018); } }
@media (max-width:1180px) { .cine-reader { display:none; } }
@media (max-width:760px) {
  .cine-masthead { font-size:9px; margin-bottom:20px; gap:10px; }
  .cine-masthead::before { width:28px;height:28px;font-size:20px; }
  .cine-masthead span:last-child { margin-left:0; }
  .cine-scene-tag { right:4%; bottom:2px; }
  .cine-contact-intro { grid-template-columns:1fr; gap:22px; }
  .cine-contact-intro h3 { font-size:clamp(36px,9vw,62px); }
  .cine-project-index { flex-wrap:wrap; gap:10px; font-size:10px; }
  .cine-project-index small { flex-basis:100%; text-align:center; }
}
@media (prefers-reduced-motion:reduce) {
  .cine-ticker-viewport { animation:none; }
  .cine-ticker-content[aria-hidden="true"] { display:none; }
  .design-v2 .hero-actions .btn,.design-v2 .project-card .project-media img { transition:none; }
}

/* Contact statement spans the full editorial column; contact methods keep their narrow layout. */
.design-v2.portfolio-home #contact > .cine-contact-intro { max-width:1150px; margin-inline:auto; }
.design-v2.portfolio-home #contact > .cine-contact-intro h3 { max-width:850px; }
.design-v2.portfolio-home #contact .contact-grid-layout { margin-top:0; }
/* Pagination remains beneath the circular deck; arrow positioning stays unchanged. */
.design-v2.portfolio-home .proj-carousel.is-enhanced .proj-controls { flex-direction:column; gap:0; }
.cine-reader a { position:relative; }
.cine-reader a span { top:50%; transform:translate(6px,-50%); }
.cine-reader a:hover span, .cine-reader a:focus-visible span { transform:translate(0,-50%); }