/* ==========================================================================
   VELIX — cinematic homepage (index.html only, loaded after velix.css)
   The opening is a short drawn film about how a VELIX website is made:
   code → design → security → launch. Scroll plays it; one caption at a time.
   ========================================================================== */

body.cine { background: #050506; }

/* Header floats over the film until it ends */
body.cine:not(.past-hero) .navbar { background: transparent; border-bottom-color: transparent; }
body.cine:not(.past-hero) .navbar::before {
  content: ''; position: absolute; inset: 0 0 -40px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,6,0.85), rgba(5,5,6,0));
}

/* The film ------------------------------------------------------------------ */
.c-hero { position: relative; height: 520vh; }
.c-hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #050506; }
.c-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.c-shade { position: absolute; inset: 0; pointer-events: none; }
.c-hero .c-shade { background: linear-gradient(90deg, rgba(5,5,6,0.7) 0%, rgba(5,5,6,0) 48%); }
[dir="rtl"] .c-hero .c-shade { background: linear-gradient(270deg, rgba(5,5,6,0.7) 0%, rgba(5,5,6,0) 48%); }
/* fine film grain */
.c-hero-pin::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.c-captions { position: absolute; inset: 0; pointer-events: none; }
.c-cap {
  position: absolute; inset-inline-start: var(--gutter); top: 50%;
  width: min(40vw, 580px);
  opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 24px));
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease), visibility 0s linear 0.6s;
}
.c-cap.is-on { opacity: 1; visibility: visible; transform: translateY(-50%); pointer-events: auto; transition: opacity 0.7s var(--ease) 0.1s, transform 0.9s var(--ease) 0.1s, visibility 0s; }
.c-kicker { font-size: 1rem; font-weight: 500; color: var(--steel); margin-bottom: 20px; }
.c-hero h1 {
  font-family: var(--sans); font-stretch: 118%; font-weight: 600;
  font-size: clamp(2.8rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.04em; color: #F4F5F6;
}
.c-hero h1 span { display: block; }
html[lang="ar"] .c-hero h1 { font-family: var(--ar-display); line-height: 1.3; letter-spacing: 0; font-size: clamp(2.6rem, 5.2vw, 5.6rem); }
.c-sub { margin-top: 24px; font-size: clamp(1.02rem, 1.3vw, 1.18rem); color: var(--steel); max-width: 30em; }
.c-chapter { display: block; font-family: var(--sans); font-stretch: 120%; font-weight: 600; font-size: 0.95rem; color: var(--steel); margin-bottom: 18px; direction: ltr; }
[dir="rtl"] .c-chapter { text-align: right; }
.c-line {
  font-family: var(--sans); font-stretch: 112%; font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 3.6rem); line-height: 1.06; letter-spacing: -0.03em; color: #F4F5F6;
}
html[lang="ar"] .c-line { font-family: var(--ar-display); line-height: 1.5; letter-spacing: 0; font-size: clamp(1.8rem, 3.2vw, 3.2rem); }
.c-actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* Chapters: a video timeline you can click */
.c-chapters {
  position: absolute; inset-inline: var(--gutter); bottom: 28px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
}
.c-chap { --p: 0; display: grid; gap: 10px; text-align: start; color: var(--steel); font-size: 0.88rem; font-weight: 500; padding: 4px 0 6px; transition: color 0.3s; }
.c-chap i { position: relative; height: 2px; background: rgba(237,238,240,0.14); overflow: hidden; }
.c-chap i::after { content: ''; position: absolute; inset: 0; background: var(--graphite); transform: scaleX(var(--p)); transform-origin: left center; }
[dir="rtl"] .c-chap i::after { transform-origin: right center; }
.c-chap.is-current, .c-chap:hover { color: var(--graphite); }
.c-skip { position: absolute; top: calc(var(--nav-h) + 16px); inset-inline-end: var(--gutter); font-size: 0.88rem; color: var(--steel); text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(237,238,240,0.25); }
.c-skip:hover { color: var(--graphite); }

/* Sections between scenes ------------------------------------------------- */
.c-section { padding-block: clamp(96px, 13vw, 176px); }
.c-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 40px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 64px); }
.c-head-note { flex-basis: 100%; color: var(--steel); max-width: 36em; margin-top: -4px; }
.c-section h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); font-stretch: 116%; letter-spacing: -0.035em; }
html[lang="ar"] .c-section h2 { letter-spacing: 0; }

/* Services: one at a time */
.c-services-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.c-services-side { position: sticky; top: calc(var(--nav-h) + 48px); }
.c-bignum {
  display: block; margin-bottom: 20px;
  font-family: var(--sans); font-stretch: 125%; font-weight: 600; font-size: clamp(5rem, 12vw, 11rem); line-height: 0.85; letter-spacing: -0.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(237,238,240,0.4); direction: ltr; font-variant-numeric: tabular-nums;
}
[dir="rtl"] .c-bignum { text-align: right; }
.c-services-side p { margin-top: 18px; color: var(--steel); max-width: 26em; }
.c-services-side .text-link { margin-top: 28px; }
.c-svc a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: 34px 0; border-top: 1px solid var(--rule); opacity: 0.32; transition: opacity 0.5s var(--ease); }
.c-svc:last-child a { border-bottom: 1px solid var(--rule); }
.c-svc.is-active a, .c-svc a:hover, .c-svc a:focus-visible { opacity: 1; }
.c-svc h3 { grid-column: 1; font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-stretch: 114%; letter-spacing: -0.025em; line-height: 1.1; }
html[lang="ar"] .c-svc h3 { letter-spacing: 0; line-height: 1.5; font-size: clamp(1.5rem, 2.5vw, 2.1rem); }
.c-svc p { grid-column: 1; color: var(--steel); max-width: 32em; }
.c-svc-time { grid-column: 2; grid-row: 1; align-self: center; font-size: 0.92rem; color: var(--steel); white-space: nowrap; }

/* Security */
.c-security { background: var(--alu-hi); border-block: 1px solid var(--rule); }
.c-security-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.c-security-side { position: sticky; top: calc(var(--nav-h) + 48px); }
.c-security-side p { margin-top: 20px; color: var(--steel); max-width: 28em; }
.c-sec-list li { position: relative; padding: 28px 0; padding-inline-start: 44px; border-top: 1px solid var(--rule); }
.c-sec-list li:last-child { border-bottom: 1px solid var(--rule); }
.c-sec-list li::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 33px; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(70,211,154,0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2346D39A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.c-sec-list h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-stretch: 110%; }
.c-sec-list p { margin-top: 8px; color: var(--steel); max-width: 34em; }

/* Work */
.c-work .portfolio-grid { gap: 48px 24px; }

/* Process */
.c-track { position: relative; height: 1px; background: var(--rule-strong); margin-bottom: 36px; }
.c-track i { position: absolute; inset: 0; background: var(--graphite); transform: scaleX(0); transform-origin: left center; }
[dir="rtl"] .c-track i { transform-origin: right center; }
.c-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
.c-step-n { display: block; font-family: var(--sans); font-stretch: 120%; font-weight: 600; font-size: 0.95rem; color: var(--steel); margin-bottom: 16px; direction: ltr; }
[dir="rtl"] .c-step-n { text-align: right; }
.c-step h3 { font-size: 1.3rem; font-stretch: 110%; margin-bottom: 8px; }
.c-step p { color: var(--steel); font-size: 0.97rem; }

/* Brand scene */
.c-break { position: relative; height: 260vh; }
.c-break-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #050506; }
.c-break-frame { position: absolute; inset: 0; clip-path: inset(48% 38% 48% 38% round 4px); will-change: clip-path; }
.c-break-frame picture, .c-break-frame img { width: 100%; height: 100%; }
.c-break-frame img { object-fit: cover; object-position: center 30%; transform: scale(1.5); transform-origin: center 32%; filter: saturate(0.25) contrast(1.1); }
.c-shade-break { background: linear-gradient(180deg, rgba(5,5,6,0) 40%, rgba(5,5,6,0.85) 100%); }
.c-break-title {
  position: absolute; inset-inline: var(--gutter); bottom: clamp(72px, 12vh, 128px); text-align: center;
  font-family: var(--sans); font-stretch: 120%; font-weight: 600; font-size: clamp(2.4rem, 6.4vw, 6.4rem); line-height: 0.98; letter-spacing: -0.045em; color: #F4F5F6;
}
html[lang="ar"] .c-break-title { font-family: var(--ar-display); letter-spacing: 0; line-height: 1.4; }
.c-break-title span { display: block; opacity: 0; }

/* FAQ */
.c-faq-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.c-faq-grid > div:first-child p { margin-top: 18px; color: var(--steel); max-width: 24em; }
.c-faq .faq-list { border-top: 1px solid var(--rule); }

/* Contact */
.c-contact { border-top: 1px solid var(--rule); }
.c-contact-title { font-size: clamp(2.8rem, 8vw, 8rem) !important; font-stretch: 120% !important; line-height: 0.95; letter-spacing: -0.045em; max-width: 11em; }
html[lang="ar"] .c-contact-title { line-height: 1.35; letter-spacing: 0; }
.c-contact-row { margin-top: clamp(48px, 6vw, 88px); display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.c-contact-links { display: grid; gap: 8px; }
.c-contact-links a { width: fit-content; font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 500; font-stretch: 110%; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 10px; text-decoration-color: var(--rule-strong); transition: text-decoration-color 0.2s; }
.c-contact-links a:hover { text-decoration-color: var(--graphite); }
.c-contact-note { margin-top: 32px; color: var(--steel); }

/* Responsive --------------------------------------------------------------- */
@media (max-width: 1024px) {
  .c-services-grid, .c-faq-grid, .c-security-grid { grid-template-columns: 1fr; }
  .c-services-side, .c-security-side { position: static; }
  .c-bignum { display: none; }
  .c-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) {
  .c-hero { height: 460vh; }
  .c-hero .c-shade, [dir="rtl"] .c-hero .c-shade { background: linear-gradient(180deg, rgba(5,5,6,0) 52%, rgba(5,5,6,0.92) 70%); }
  .c-cap { top: auto; bottom: 92px; width: auto; inset-inline: var(--gutter); transform: translateY(24px); }
  .c-cap.is-on { transform: none; }
  .c-hero h1 { font-size: clamp(2.3rem, 10vw, 3.2rem); }
  html[lang="ar"] .c-hero h1 { font-size: clamp(2.1rem, 9.5vw, 3rem); }
  .c-sub { margin-top: 14px; font-size: 1rem; }
  .c-line { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  html[lang="ar"] .c-line { font-size: clamp(1.5rem, 6.6vw, 2rem); }
  .c-chapter { margin-bottom: 10px; }
  .c-actions { flex-direction: column; align-items: stretch; margin-top: 22px; }
  .c-actions .btn { width: 100%; }
  .c-actions .text-link { align-self: flex-start; }
  .c-chapters { bottom: 20px; gap: 8px; }
  .c-chap { font-size: 0.78rem; }
}
@media (max-width: 640px) {
  .c-section { padding-block: 80px; }
  .c-svc a { grid-template-columns: 1fr; padding: 26px 0; opacity: 1; }
  .c-svc-time { grid-column: 1; grid-row: auto; }
  .c-steps { grid-template-columns: 1fr; gap: 28px; }
  .c-track { display: none; }
  .c-step { padding-top: 18px; border-top: 1px solid var(--rule-strong); }
  .c-break { height: 220vh; }
  .c-contact-row .btn { width: 100%; }
  .c-contact-links a { font-size: 1.4rem; }
}

/* Reduced motion: the finished frame, all captions readable */
body.cine.reduced .c-hero, body.cine.reduced .c-break { height: auto; }
body.cine.reduced .c-hero-pin { position: relative; height: auto; min-height: 100vh; }
body.cine.reduced .c-canvas { position: absolute; height: 100vh; opacity: 0.35; }
body.cine.reduced .c-captions { position: relative; z-index: 1; padding: calc(var(--nav-h) + 40px) 0 120px; }
body.cine.reduced .c-cap { position: relative; inset: auto; top: auto; opacity: 1; visibility: visible; transform: none; margin: 0 var(--gutter) 40px; }
body.cine.reduced .c-chapters, body.cine.reduced .c-skip { display: none; }
body.cine.reduced .c-break-pin { position: relative; height: 70vh; }
body.cine.reduced .c-break-frame { clip-path: none; }
body.cine.reduced .c-break-frame img { transform: none; }
body.cine.reduced .c-break-title span { opacity: 1; }