/* Layout ratios recovered from Lusion HomeReelSection, 2026-10-21.
   Project typography, copy and shared brand buttons are intentional adaptations. */
.entry-marketing .reel-section {
  --reel-line-start: #2a38ee;
  --reel-line-end: #5a90ff;
  --reel-video-tint: #1a2ffb;
  --reel-gap: 2vw;
  --reel-column: calc((100% - 11 * var(--reel-gap)) / 12);
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--reel-gap);
  padding: clamp(30px, 4vw, 50px) max(5vw, 40px);
  font-size: clamp(14px, 1vw, 32px);
}
.reel-canvas { position: fixed; z-index: 0; top: 0; left: 0; width: 100%; height: 100svh; pointer-events: none; }
.entry-marketing .reel-title { position: relative; z-index: 1; grid-column: 1 / span 12; margin: 1em 0 .5em; font-size: 10vw; line-height: 1; font-weight: 700; letter-spacing: -.055em; pointer-events: none; }
.reel-title-inner { display: inline-block; position: relative; will-change: transform; }
.reel-title-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.reel-title-line--first { padding-left: calc(var(--reel-column) * 2 + var(--reel-gap) * 2); }
.reel-title-line > span { display: inline-block; }
.entry-marketing .reel-content { position: relative; z-index: 1; grid-column: 7 / span 6; height: fit-content; }
.entry-marketing .reel-description { font-size: clamp(16px, 1.5vw, 28px); line-height: 1.65; color: #535d6d; }
.entry-marketing .reel-cta { width: max-content; max-width: 100%; margin-top: 3em; font-size: 14px; gap: 12px; }
.entry-marketing .reel-disclosure { margin-top: 18px; font-size: 11px; line-height: 1.6; color: #697487; }
.reel-thumb-wrapper { position: relative; grid-column: 1 / span 5; width: calc(100% + var(--reel-gap) * 2); height: 0; top: -10em; }
.reel-thumb { position: relative; width: 100%; height: 0; padding-top: 56.25%; }
.reel-container { position: relative; grid-column: 1 / 13; padding-bottom: 100svh; margin-bottom: 10svh; }
.reel-container-inner { position: relative; width: 100%; }
.is-reel-webgl .reel-container { box-sizing: border-box; height: calc(var(--reel-frame-height) + 100svh + var(--reel-frame-inset)); padding-top: var(--reel-frame-inset); padding-bottom: 0; }
.is-reel-webgl .reel-container-inner { position: sticky; top: var(--reel-pin-top); }
.reel-video-frame { position: relative; width: 100%; height: min(45vw, 72svh); border-radius: 20px; corner-shape:var(--md-corner-shape); }
.reel-video-surface { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; corner-shape:inherit; }
.reel-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; corner-shape:inherit; background: #edf3ff; }
.is-reel-webgl .reel-video { opacity: 0; }
/* Match the shader's 2:1 presentation surface before its vertical crop. */
.is-reel-webgl .is-reel-native .reel-video { top: 50%; bottom: auto; height: auto; aspect-ratio: 2; transform: translateY(-50%); object-fit: fill; border-radius: 0; corner-shape:var(--md-corner-shape); opacity: 1; }
.reel-video-actions { position: absolute; z-index: 1; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.reel-video-actions.is-reel-floating { position: fixed; inset: auto; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; transition: none; will-change: transform; }
.reel-video-actions.is-reel-floating .reel-video-hit { max-width: none; flex-shrink: 0; }
.entry-marketing .reel-video-hit { width: max-content; max-width: calc(100% - 32px); gap: 12px; pointer-events: auto; font-size: 14px; }
.reel-pause { position: absolute; z-index: 2; bottom: 18px; right: 18px; padding: 9px 14px; border: 1px solid #dce3ef; border-radius:9999px; corner-shape:round; background: #fffffff0; color: #44516a; font-size: 12px; cursor: pointer; }
.reel-video-note { position: absolute; bottom: 24px; left: 22px; z-index: 1; font-size: 11px; color: #44516a; }
.is-reel-webgl .reel-video-frame:not(.is-reel-expanded) > :not(video) { visibility: hidden; }
.reel-word, .reel-copy-word { display: inline-block; will-change: transform; }
@media (min-aspect-ratio: 21/9) { .entry-marketing .reel-title { font-size: 6.7vw; } }
@media (max-width: 812px) {
  .entry-marketing .reel-section { padding: 25px; grid-template-columns: repeat(6,minmax(0,1fr)); --reel-gap: 4vw; }
  .entry-marketing .reel-title { grid-column: 1 / span 6; font-size: 10.5vw; margin-block: 1em; }
  .reel-title-line--first { padding-left: 0; }
  .entry-marketing .reel-content { grid-column: 1 / span 6; margin-bottom: 40px; }
  .entry-marketing .reel-description { font-size: 15px; }
  .entry-marketing .reel-cta { margin-top: 24px; }
  .reel-thumb-wrapper { display: none; }
  .reel-container, .is-reel-webgl .reel-container { grid-column: 1 / span 6; height: auto; padding: 0; margin-bottom: 30px; }
  .is-reel-webgl .reel-container-inner { position: relative; top: auto; }
  .reel-video-frame { height: auto !important; margin-top: 0 !important; aspect-ratio: 1.6; border-radius: 15px; corner-shape:var(--md-corner-shape); }
  .reel-canvas { display: none; }
  .is-reel-webgl .reel-video { opacity: 1; }
  .is-reel-webgl .reel-video-frame:not(.is-reel-expanded) > :not(video) { visibility: visible; }
  .reel-video-note { font-size: 9px; bottom: 18px; left: 13px; }
  .reel-pause { bottom: 10px; right: 10px; font-size: 10px; }
  .entry-marketing .reel-video-hit { font-size: 12px; padding: 12px 17px; }
  .reel-animated .reel-title-line > span, .reel-animated .reel-title-line:nth-child(2) > span { transform: none; }
  .reel-animated .reel-content { opacity: 1; }
}
@media (max-width: 560px) { .reel-video-frame { aspect-ratio: 3 / 4; } }
@media (prefers-reduced-motion: reduce) {
  .reel-canvas { display: none; }
  .is-reel-webgl .reel-video { opacity: 1; }
  .is-reel-webgl .reel-video-frame:not(.is-reel-expanded) > :not(video) { visibility: visible; }
  .reel-animated .reel-title-line > span, .reel-animated .reel-title-line:nth-child(2) > span { transform: none; animation: none; }
  .reel-animated .reel-content { opacity: 1; animation: none; }
  .entry-marketing .reel-container { height: auto; padding: 0; margin-bottom: 40px; }
  .is-reel-webgl .reel-container-inner { position: relative; top: auto; }
  .reel-thumb-wrapper { display: none; }
}