/* The NAD+ film on /nad-therapy and /terapia-nad: the Instagram video, framed in the site's navy, teal
   and glass. Depth comes from four layers: the film's own light behind it, the frame, a sheen that
   follows the pointer, and a label in front. Reduced motion keeps the layers and drops the movement. */

.nad-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 372px); grid-template-areas: "head film" "body film"; column-gap: clamp(44px, 6vw, 92px); align-items: start; }
.nad-hero-head { grid-area: head; align-self: end; }
.nad-hero-body { grid-area: body; }
.nad-film { grid-area: film; align-self: center; position: relative; z-index: 1; margin: 0; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 28%; perspective: 1400px; }
@media (max-width: 999px) {
  .nad-hero-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "film" "body"; }
  .nad-film { justify-self: center; width: min(352px, 100%); margin: 46px 0 14px; }
  .nad-hero-grid > .mo-bloom { display: none; }
}

.nad-film-stage { position: relative; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s cubic-bezier(.2,.75,.2,1); }
.nad-film.is-tilting .nad-film-stage { transition: transform .14s linear; }

/* The film's own colour, blurred into the page behind it. Until the script paints it, a teal glow. */
.nad-film-ambient { position: absolute; z-index: 0; left: -24%; top: -12%; width: 148%; height: 124%; border-radius: 50%; background: radial-gradient(closest-side, rgba(56,220,201,.42), rgba(34,232,255,.16) 55%, transparent); filter: blur(46px) saturate(1.7); opacity: .78; transform: translateZ(-90px); pointer-events: none; }

.nad-film-frame { position: relative; z-index: 1; padding: 1.5px; border-radius: 34px; background: linear-gradient(152deg, rgba(140,236,225,.95), rgba(34,232,255,.32) 28%, rgba(255,255,255,.07) 56%, rgba(56,220,201,.75)); box-shadow: 0 70px 120px -34px rgba(0,6,15,.8), 0 26px 54px -18px rgba(0,0,0,.55), 0 0 96px rgba(56,220,201,.2); animation: nad-film-float 7s ease-in-out infinite; }
.nad-film-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 32.5px; background: #061a28; object-fit: cover; }
.nad-film-sheen { position: absolute; inset: 1.5px; z-index: 2; border-radius: 32.5px; background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.2), transparent 44%), linear-gradient(162deg, rgba(255,255,255,.12), transparent 36%); mix-blend-mode: screen; pointer-events: none; transition: opacity .3s ease; }
.nad-film.has-sound .nad-film-sheen { opacity: 0; }
@keyframes nad-film-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* In front of the frame: what this is, and how long. */
.nad-film-chip { position: absolute; z-index: 4; top: -17px; right: -20px; display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid rgba(140,236,225,.38); border-radius: 999px; background: rgba(6,26,40,.66); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 18px 40px rgba(0,6,15,.5), inset 0 1px 0 rgba(255,255,255,.1); color: #eafffb; font-size: 12px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; transform: translateZ(70px); pointer-events: none; }
.nad-film-chip i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 14px rgba(56,220,201,.9); }
@media (max-width: 560px) { .nad-film-chip { right: 10px; } }

/* The whole picture is the "watch with sound" button; the pill says so. */
.nad-film-cover { position: absolute; inset: 1.5px; z-index: 3; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 15px; border: 0; border-radius: 32.5px; background: linear-gradient(180deg, transparent 72%, rgba(3,14,24,.42)); color: #fff; font: inherit; cursor: pointer; }
.nad-film-pill { display: inline-flex; align-items: center; gap: 10px; padding: 8px 17px 8px 8px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(6,26,40,.6); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 14px 34px rgba(0,6,15,.45); font-size: 13px; font-weight: 800; letter-spacing: .01em; transition: transform .25s ease, background .25s ease; }
.nad-film-pill i { position: relative; display: grid; width: 26px; height: 26px; place-items: center; border-radius: 50%; background: var(--teal); box-shadow: 0 0 18px rgba(56,220,201,.75); }
.nad-film-pill i::before { content: ""; margin-left: 2px; border-style: solid; border-width: 5.5px 0 5.5px 9px; border-color: transparent transparent transparent #052230; }
.nad-film-pill i::after { content: ""; position: absolute; inset: -5px; border: 2px solid rgba(56,220,201,.6); border-radius: 50%; animation: nad-film-pulse 2.2s ease-out infinite; }
.nad-film-cover:hover .nad-film-pill { transform: translateY(-2px); background: rgba(6,26,40,.78); }
.nad-film-cover:focus-visible { outline: none; }
.nad-film-cover:focus-visible .nad-film-pill, .nad-film-pause:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
@keyframes nad-film-pulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.55); opacity: 0; } }

.nad-film-pause { position: absolute; z-index: 4; right: 15px; bottom: 16px; display: grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: rgba(6,26,40,.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; cursor: pointer; }
.nad-film-pause::before { content: ""; width: 10px; height: 12px; border-left: 3.5px solid currentColor; border-right: 3.5px solid currentColor; box-sizing: border-box; }
.nad-film-pause.is-paused::before { width: 0; height: 0; margin-left: 3px; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.nad-film-cover[hidden], .nad-film-pause[hidden] { display: none; }

.nad-film figcaption { margin: 26px auto 0; max-width: 330px; color: #9ab2bb; font-size: 13px; line-height: 1.6; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .nad-film-frame, .nad-film-pill i::after { animation: none; }
  .nad-film-stage { transform: none; transition: none; }
}