/* ReignVoIP v2 — globe hero, particle wordmark, horizontal gallery, kinetic marquee, background video */

/* ---------- 3D globe in the hero ---------- */
.hero-globe { display: none; }
.globe-on .hero-globe { display: block; position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1.2s ease; }
.globe-ready .hero-globe { opacity: 1; }
.hero-globe canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.hero-globe canvas:active { cursor: grabbing; }
.globe-on .hero2-map { display: none; }
.globe-on .hero2 .photo-frame { display: none; }
.globe-on .hero2-grid { pointer-events: none; }
.globe-on .hero2-copy { pointer-events: auto; }
.globe-on .hero2-side { min-height: 460px; pointer-events: none; }
.globe-on .hero2 .live-card { left: auto; right: 4%; bottom: 0; }
.globe-on .hero2 .chip.c1 { top: 4%; right: 30%; }
.globe-on .hero2 .chip.c2 { top: 52%; right: -2%; }
.globe-on .hero2-shade { background: linear-gradient(90deg, rgba(7, 11, 20, .95) 0%, rgba(7, 11, 20, .7) 38%, rgba(7, 11, 20, 0) 62%); z-index: 1; }
.globe-on .hero2-grid { z-index: 2; }

/* ---------- Particle wordmark ---------- */
.signal { position: relative; background: var(--ink); padding: 40px 0 72px; border-top: 1px solid var(--line); overflow: hidden; }
.signal canvas { display: block; width: 100%; height: clamp(220px, 34vw, 460px); touch-action: pan-y; }
.signal p { text-align: center; color: var(--mist); font-size: clamp(1rem, 1.6vw, 1.25rem); margin: 6px auto 0; max-width: 46ch; padding: 0 16px; }

/* ---------- Background video ---------- */
.bg-video-wrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bg-video-wrap video, .bg-video-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-video-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(7, 11, 20, .55) 30%, rgba(7, 11, 20, .55) 70%, var(--ink) 100%); }
.callpath-pin { position: relative; }
.callpath-pin > .container { position: relative; z-index: 1; }
.callpath .bg-video-wrap video { opacity: .55; }

/* ---------- Parallax mosaic gallery: 3 columns moving at different speeds ---------- */
.mosaic2-sec { position: relative; background: var(--ink); border-top: 1px solid var(--line); padding: 104px 0 140px; overflow-x: clip; }
.mosaic2-intro { max-width: 680px; margin: 0 auto 64px; text-align: center; }
.mosaic2-intro p { color: var(--mist); line-height: 1.75; margin: 0 auto 24px; max-width: 56ch; }
.mosaic2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.m-col { display: grid; gap: 20px; will-change: transform; }
.m-col:nth-child(2) { margin-top: 18vh; }
.m-tile { position: relative; margin: 0; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); background: var(--navy); }
.m-tile.tall { aspect-ratio: 4 / 5; }
.m-media { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.m-media img, .m-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-tile:hover .m-media { transform: scale(1.06); }
.m-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(7, 11, 20, .9)); pointer-events: none; }
.m-tile figcaption { position: absolute; z-index: 1; left: 22px; right: 22px; bottom: 20px; }
.m-tile figcaption b { display: block; font: 700 clamp(1.05rem, 1.6vw, 1.45rem)/1.2 var(--font-display); color: #fff; margin-bottom: 6px; }
.m-tile figcaption span { color: #cbd5e1; font-size: .92rem; line-height: 1.5; display: block; }

@media (max-width: 899px) {
  .mosaic2-sec { padding: 72px 0 88px; }
  .mosaic2 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .m-col { display: contents; }
  .m-col:nth-child(2) { margin-top: 0; }
  .m-tile, .m-tile.tall { aspect-ratio: 4 / 5; }
  .m-tile figcaption { left: 14px; right: 14px; bottom: 12px; }
  .m-tile figcaption span { display: none; }
}
@media (max-width: 520px) {
  .mosaic2 { grid-template-columns: 1fr; }
  .m-tile, .m-tile.tall { aspect-ratio: 4 / 3; }
  .m-tile figcaption span { display: block; }
}

/* ---------- Kinetic marquee ---------- */
.kmarq { position: relative; background: var(--ink); padding: 56px 0; overflow: hidden; border-top: 1px solid var(--line); }
.kmarq-row { white-space: nowrap; will-change: transform; }
.kmarq-row + .kmarq-row { margin-top: 6px; }
.kmarq-track { display: inline-flex; will-change: transform; }
.kmarq-track span { font: 800 clamp(3rem, 9vw, 8.5rem)/1.05 var(--font-display); letter-spacing: -.02em; padding-right: .5em; color: var(--paper); }
.kmarq-row.outline .kmarq-track span { color: transparent; -webkit-text-stroke: 1.5px var(--gold); }
.kmarq-row.outline .kmarq-track span b { color: var(--gold); -webkit-text-stroke: 0; font-weight: 800; }

@media (max-width: 1100px) {
  .globe-ready .hero-globe { opacity: .85; }
  .globe-on .hero2-shade { background: linear-gradient(180deg, rgba(7, 11, 20, .85) 0%, rgba(7, 11, 20, .55) 55%, rgba(7, 11, 20, .1) 100%); }
  .globe-on .hero2-side { min-height: 240px; }
  .globe-on .hero2 .chip.c1 { right: 8px; top: 0; }
}