/* ============================================================
   XO8 MEDIA - home.css  (landing page)
   ============================================================ */

/* ---------- background video layer ---------- */
.bg { position: fixed; top: 0; left: 0; right: 0; bottom: auto; width: 100%; height: 100vh; height: 100lvh; min-height: 100dvh; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-inner { position: absolute; inset: -7%; will-change: transform; }
.bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; }
.bg-placeholder { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(237,232,224,0.028) 0, rgba(237,232,224,0.028) 1px, transparent 1px, transparent 20px); }
.bg-glow  { position: absolute; width: 64vw; height: 64vw; border-radius: 50%; background: radial-gradient(circle, rgba(168,52,43,0.13), transparent 65%); top: 4%; right: -14%; will-change: transform; animation: xoDrift 14s ease-in-out infinite; }
.bg-glow-2 { position: absolute; width: 40vw; height: 40vw; border-radius: 50%; background: radial-gradient(circle, rgba(237,232,224,0.04), transparent 65%); bottom: -10%; left: -8%; will-change: transform; animation: xoDrift 18s ease-in-out infinite reverse; }
.bg-veil { position: absolute; inset: 0; background: linear-gradient(rgba(12,11,10,0.62), rgba(12,11,10,0.86)); opacity: 1; }
.bg-label { position: absolute; bottom: 20px; right: 24px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; color: var(--dim); }

/* ---------- hero ---------- */
.hero {
  min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 140px var(--pad) 36px; position: relative; z-index: 1;
}
.hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; opacity: 0; animation: xoFade 1s ease 0.1s forwards; }
.hero-dot { width: 9px; height: 9px; background: var(--red); display: inline-block; animation: xoPulse 2.4s ease infinite; }
.hero-eyebrow span:last-child { font-size: 11px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--muted); }

.hero-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(58px, 9.5vw, 176px); line-height: 0.93; letter-spacing: 0.005em; color: var(--text); }
.hero-title .line-mask:nth-child(1) .line { animation-delay: 0.05s; }
.hero-title .line-mask:nth-child(2) .line { animation-delay: 0.16s; }
.hero-title .line-mask:nth-child(3) .line { animation-delay: 0.27s; }
.hero-title .line-mask:nth-child(4) .line { animation-delay: 0.38s; }

.hero-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-top: 48px; flex-wrap: wrap; opacity: 0; animation: xoFade 1.2s ease 0.7s forwards; }
.hero-ctas { display: flex; align-items: center; gap: 28px; }
.hero-lede { max-width: 360px; font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--muted); }
.scroll-hint { display: flex; justify-content: center; margin-top: 64px; padding-bottom: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--dim); opacity: 0; animation: xoFade 1.2s ease 1s forwards; }

/* ---------- manifesto ---------- */
.manifesto { padding: 220px var(--pad); max-width: 1500px; position: relative; z-index: 1; }
.manifesto-text { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(36px, 5.2vw, 92px); line-height: 1.08; letter-spacing: 0.005em; color: var(--text); }

/* ---------- shared section header ---------- */
.section { position: relative; z-index: 1; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 70px; }
.section-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(42px, 6vw, 110px); line-height: 0.95; color: var(--text); }
.section-note { max-width: 340px; font-size: 13.5px; font-weight: 300; line-height: 1.8; color: var(--muted); }

/* ---------- services ---------- */
.services { padding: 100px var(--pad) 140px; }
.services .eyebrow { display: block; margin-bottom: 22px; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); border-top: 1px solid var(--line); position: relative; }
.srow {
  display: grid; grid-template-columns: 52px 1fr 40px; gap: 8px; align-items: center;
  padding: 34px 28px 34px 0; cursor: pointer; outline: none;
  border-bottom: 1px solid var(--line); transition: background 0.35s, padding-left 0.35s;
}
.srow:hover, .srow:focus-visible { background: rgba(237,232,224,0.025); padding-left: 18px; }
.snum { font-family: var(--mono); font-size: 11px; color: var(--dim); align-self: start; padding-top: 6px; transition: color 0.3s; }
.sroll-mask { margin: 0 0 8px; height: 30px; overflow: hidden; }
.sroll { display: block; transition: transform 0.5s var(--expo); }
.sroll span { display: block; font-family: var(--display); font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.sroll span:last-child { color: var(--red); }
.sdesc { font-size: 12.5px; font-weight: 300; line-height: 1.7; color: var(--muted); max-width: 460px; }
.sx { justify-self: end; font-size: 20px; line-height: 1; color: var(--dim); transition: color 0.35s, transform 0.45s var(--expo); }
.services-spot { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; background: radial-gradient(420px circle at 50% 50%, rgba(168,52,43,0.09), transparent 70%); }

/* ---------- services modal ---------- */
.modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 24px; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; }
.modal-bg { position: absolute; inset: 0; background: rgba(8,7,6,0.72); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.4s ease; }
.modal-panel {
  position: relative; width: min(52vw, 720px); max-height: 84vh; overflow-y: auto;
  background: #14110F; border: 1px solid rgba(237,232,224,0.16); box-sizing: border-box;
  padding: clamp(28px, 3.4vw, 56px); transform: translateY(24px) scale(0.97); opacity: 0;
  transition: transform 0.55s var(--expo), opacity 0.45s ease; box-shadow: 0 40px 120px rgba(0,0,0,0.6);
}
.modal-x { position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(237,232,224,0.2); background: transparent; color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s; }
.modal-x:hover { background: var(--red); border-color: var(--red); }
.modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.modal-num { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--red); }
.modal-rule { flex: 1; height: 1px; background: rgba(237,232,224,0.14); }
.modal-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(32px, 3.6vw, 58px); line-height: 0.98; color: var(--text); }
.modal-tag { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.modal-body { margin-top: 24px; font-size: 14.5px; font-weight: 300; line-height: 1.9; color: var(--muted-2); }
.modal-items { margin-top: 34px; border-top: 1px solid var(--line-2); }
.modal-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.modal-item-h { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); }
.modal-item-p { margin-top: 5px; font-size: 12.5px; font-weight: 300; line-height: 1.6; color: var(--muted); }
.modal-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 36px; background: var(--red); color: var(--text); font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; padding: 16px 34px; border-radius: 100px; }

/* ---------- work ---------- */
.work { padding: 140px var(--pad); }
.work .eyebrow { display: block; margin-bottom: 22px; }
.work-list { border-top: 1px solid var(--line-2); }
.wrow {
  display: grid; grid-template-columns: 140px 1fr auto 44px; gap: 24px; align-items: baseline;
  padding: 42px 0; border-bottom: 1px solid var(--line-2); outline: none;
}
.wrow[data-href] { cursor: pointer; }
.wrow:focus-visible { outline: 1px solid rgba(237,232,224,0.45); outline-offset: -2px; }
.wcl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--dim); display: inline-block; will-change: transform; }
.wt { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 4.2vw, 72px); line-height: 1; color: var(--muted); }
.wmeta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--muted); text-align: right; }
.war { font-size: clamp(20px, 2vw, 32px); color: var(--red); opacity: 0; transform: translateX(-8px); display: inline-block; text-align: right; }

/* mouse-following filmstrip preview card */
.fcard { position: fixed; top: 0; left: 0; width: 300px; height: 375px; z-index: 80; pointer-events: none; will-change: transform; }
.fwrap { width: 100%; height: 100%; opacity: 0; transform: scale(0.65); overflow: hidden; background: var(--panel); border: 1px solid rgba(237,232,224,0.16); will-change: transform, opacity; }
.fstrip { display: flex; height: 100%; will-change: transform; }
.fslide { flex: 0 0 100%; height: 100%; position: relative; overflow: hidden; }
.finner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.finner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.75) contrast(1.05) brightness(0.85); }
.finner-veil { position: absolute; inset: 0; background: linear-gradient(rgba(12,11,10,0.05), rgba(12,11,10,0.5)); }
.finner-tl { position: absolute; top: 14px; left: 16px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: var(--text); }
.finner-bl { position: absolute; bottom: 14px; left: 16px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: var(--text); }

/* ---------- network ---------- */
.network {
  position: relative; z-index: 1; border-top: 1px solid var(--line); min-height: 94vh;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
}
.section-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; }
.network-veil { position: absolute; inset: 0; background: linear-gradient(rgba(12,11,10,0.88), rgba(12,11,10,0.38) 50%, rgba(12,11,10,0.92)); }
.network-top { position: relative; padding: 150px var(--pad) 0; }
.network-top .eyebrow { display: block; margin-bottom: 22px; }
.network-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(40px, 5.4vw, 100px); line-height: 0.98; color: var(--text); max-width: 1200px; text-shadow: 0 2px 40px rgba(12,11,10,0.6); }
.network-title span { color: var(--red); }
.network-lede { margin-top: 32px; max-width: 480px; font-size: 14px; font-weight: 300; line-height: 1.85; color: var(--muted-2); text-shadow: 0 1px 20px rgba(12,11,10,0.8); }
.network-stats { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px; border-top: 1px solid rgba(237,232,224,0.25); margin: 90px var(--pad) 0; padding: 30px 0 50px; }
.network-stat-num { font-family: var(--display); font-size: clamp(40px, 3.6vw, 64px); line-height: 1; color: var(--text); text-shadow: 0 2px 30px rgba(12,11,10,0.7); }
.network-stat-num--red { color: var(--red); }
.network-stat-label { margin-top: 10px; font-size: 10px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted-2); }

/* ---------- team ---------- */
.team { padding: 140px var(--pad); border-top: 1px solid var(--line); }
.team .eyebrow { display: block; margin-bottom: 22px; }
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(14px, 1.6vw, 28px); }
.tcard { position: relative; }
.tcard-inner { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--panel); }
.tcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(0.8) contrast(1.05); transition: filter 1.3s ease, transform 0.6s var(--expo); will-change: transform; }
.tcard-veil { position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(12,11,10,0.85)); }
.trole { position: absolute; left: 14px; bottom: 46px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); opacity: 0; transform: translateY(6px); transition: opacity 0.4s ease, transform 0.4s var(--expo); }
.tname { position: absolute; left: 14px; bottom: 16px; font-family: var(--display); font-size: 21px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); }
.tnum { position: absolute; right: 12px; top: 12px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--muted); }
.tcard:hover img { filter: grayscale(0) brightness(1) contrast(1.02); transform: scale(1.05); }
.tcard:hover .trole { opacity: 1; transform: translateY(0); }
/* no hover (touch): roles can't be revealed, so always show them */
@media (hover: none) {
  .trole { opacity: 1; transform: none; }
}

/* ---------- products ---------- */
.products { padding: 140px var(--pad); border-top: 1px solid var(--line); }
.products .eyebrow { display: block; margin-bottom: 22px; }
.products-list { border-top: 1px solid var(--line-2); }
.prow { border-bottom: 1px solid var(--line-2); }
.prow-head { display: grid; grid-template-columns: 110px 1fr 1.1fr; gap: 28px; align-items: center; padding: 40px 0; transition: padding-left 0.4s var(--ease); }
.prow:hover .prow-head { padding-left: 28px; }
.prow-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(24px, 2.8vw, 46px); color: var(--text); }
.prow-desc { font-size: 13px; font-weight: 300; line-height: 1.75; color: var(--muted); }

.badge { font-size: 9.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; padding: 7px 14px; border-radius: 100px; text-align: center; }
.badge--live { color: var(--text); background: var(--red); }
.badge--beta { color: var(--red-2); border: 1px solid rgba(194,69,58,0.5); padding: 6px 13px; }
.badge--soon { color: var(--muted); border: 1px solid rgba(237,232,224,0.2); padding: 6px 13px; }

.pexp { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.8s var(--expo), opacity 0.5s ease; }
.pexp-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding: 6px 0 44px; }
.pmedia { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.pvideo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: saturate(0.85) brightness(0.92); opacity: 0; transition: opacity 0.6s ease; }
.pmedia-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,11,10,0.3), transparent 60%); }
.pmedia-label { position: absolute; bottom: 12px; left: 14px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; color: var(--text); }
.pexp-side { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.plink { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; color: var(--red); }

/* ---------- contact ---------- */
.contact {
  padding: 140px var(--pad); border-top: 1px solid var(--line); text-align: center;
  position: relative; z-index: 1; min-height: 96vh; display: flex; flex-direction: column;
  justify-content: center; overflow: hidden;
}
.contact-veil { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12,11,10,0.55), rgba(12,11,10,0.92)); }
.contact .eyebrow { position: relative; margin-bottom: 40px; }
.contact-title { position: relative; margin: 0 auto; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(48px, 8vw, 150px); line-height: 0.95; color: var(--text); max-width: 1300px; text-shadow: 0 2px 50px rgba(12,11,10,0.7); }
.contact-lede { position: relative; margin: 44px auto 56px; max-width: 420px; font-size: 14px; font-weight: 300; line-height: 1.8; color: var(--muted-2); text-shadow: 0 1px 20px rgba(12,11,10,0.8); }
.contact-ctas { position: relative; display: flex; gap: 32px; justify-content: center; align-items: center; flex-wrap: wrap; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 90px var(--pad) 0; overflow: hidden; position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 100px; }
.footer-logo { font-family: var(--display); font-size: 20px; letter-spacing: 0.06em; color: var(--text); margin-bottom: 16px; }
.footer-logo span { color: var(--red); }
.footer-about { max-width: 300px; font-size: 12.5px; font-weight: 300; line-height: 1.8; color: var(--dim); }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col h5 { font-size: 9.5px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.footer-col a { font-size: 12.5px; color: var(--muted); transition: color 0.3s; }
.footer-col a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; color: #6f675c; }
.footer-legal { display: flex; gap: 28px; }
.footer-legal a { color: #8c8478; transition: color 0.3s; }
.footer-legal a:hover { color: var(--text); }

/* ---------- mobile ---------- */
@media (max-width: 700px) {
  .nav-links { display: none; }
  .clock { display: none; }
  .services-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .modal-panel { width: 92vw; max-height: 88vh; }
  .wrow { grid-template-columns: 1fr; gap: 10px; padding: 30px 0; }
  .wmeta { text-align: left; }
  .war { display: none; }
  .prow-head { grid-template-columns: 1fr; gap: 14px; }
  .prow-head .badge { justify-self: start; }
  .pexp-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 36px; }
}