/* =============================================================================
   STUDIO SEVEN — service-page hero loops                    (s7-loop.js + scene)
   A 12-second code-driven loop behind each service page's headline. Same world
   as the homepage reel: ink, violet, lavender, particles, white line-art, grain.
   Desktop: the scene lives in the free space right of the copy.
   Phone: the scene gets its own band above the copy.
   ========================================================================== */

.hero-v5-card.has-s7l { isolation: isolate; }
.hero-v5-card.has-s7l .hero-v5-video,
.hero-v5-card.has-s7l .hero-v5-tint { display: none; }

.s7l {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0c0d12;
  container-type: size;
}
/* static fallback (no JS): a soft violet bloom on the right */
.s7l::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(40% 55% at 76% 46%, rgba(91, 64, 242, .30), transparent 72%);
  pointer-events: none;
}
.s7l.is-live::before { display: none; }

.s7l-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}

/* legibility: calm the side the copy sits on */
.s7l-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 13, 18, .78) 0%, rgba(12, 13, 18, .5) 34%, rgba(12, 13, 18, 0) 58%);
}
@container (orientation: portrait) {
  .s7l-scrim {
    background: linear-gradient(180deg, rgba(12, 13, 18, 0) 0%, rgba(12, 13, 18, 0) 40%, rgba(12, 13, 18, .6) 56%, rgba(12, 13, 18, .82) 100%);
  }
}

/* the scene — positioned + sized by the script so it never touches the copy */
.s7l-svg {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  overflow: visible;
  pointer-events: none;
}
.s7l-svg text { font-kerning: normal; }

.s7l-grain {
  position: absolute;
  inset: -60%;
  z-index: 4;
  pointer-events: none;
  opacity: .45;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2.2 0 0 0 -.6  2.2 0 0 0 -.6  2.2 0 0 0 -.6  0 0 0 0 .5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  animation: s7lGrain .8s steps(5) infinite;
}
@keyframes s7lGrain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -1%); }
  80%  { transform: translate(3%, 3%); }
  100% { transform: translate(0, 0); }
}
.s7l:not(.is-live) .s7l-grain { display: none; }

/* the copy sits above the loop */
.hero-v5-card.has-s7l .hero-v5-overlay { position: relative; z-index: 5; }

/* Phone: give the loop its own band above the headline — the card grows to fit
   (the phone card is otherwise a fixed 3:4, which would push the copy over the loop) */
/* band mode is chosen by the script (portrait-shaped cards: phones + tablets) */
.hero-v5-card.has-s7l.s7l-band .hero-v5-overlay {
  padding-top: calc(var(--s7l-band, 64vw) + 16px) !important;
}
@media (max-width: 600px) {
  .hero-v5-card.has-s7l { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; }
  .hero-v5-card.has-s7l .hero-v5-overlay { height: auto; padding-bottom: 26px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .s7l-grain { animation: none; }
}