/* 02 · Uma oportunidade de Natal — capítulo de referência dos motivos (NL.garland, NL.swing, NL.twinkle, NL.beat).
   Palco fixado em três faixas (grade da .op-wrap): o cabeçalho no alto; a faixa do fio de luzinhas (a sobra da tela
   vai para ela); a fileira dos quatro pilares embaixo. O fio e as fitas são medidos no JS (--len em cada .op-hang).
   Tudo sob #oportunidade. */
#oportunidade .op-stage { isolation: isolate; }

/* fundo: árvore em bokeh (desfocada na pós), bem apagada sobre o veludo; o JS faz um avanço lento de câmera */
#oportunidade .op-bg { position: absolute; inset: -4%; z-index: 0; transform-origin: 62% 40%; will-change: transform; }
#oportunidade .op-bokeh { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
#oportunidade .op-bg.has-missing { display: none; }
/* véu: escuro no alto (cabeçalho) e embaixo (texto dos pilares); o meio deixa o bokeh respirar */
#oportunidade .op-veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 13, 9, .8) 0%, rgba(7, 18, 13, .46) 26%, rgba(7, 18, 13, 0) 44%),
    linear-gradient(90deg, rgba(5, 13, 9, .64) 0%, rgba(7, 18, 13, .44) 42%, rgba(7, 18, 13, .16) 66%, rgba(7, 18, 13, 0) 84%),
    linear-gradient(0deg, rgba(5, 13, 9, .86) 0%, rgba(7, 18, 13, .5) 24%, rgba(7, 18, 13, 0) 46%),
    radial-gradient(60% 50% at 50% 55%, rgba(233, 162, 75, .08), rgba(233, 162, 75, 0) 70%); }
#oportunidade .op-garland { position: absolute; inset: 0; z-index: 2; }
/* estrela do deck no canto de baixo, meio fora do quadro, girando devagar (longe de todo texto): .star8--corner do
   núcleo, só o tamanho e a opacidade aqui */
#oportunidade .op-star { --size: min(30vmin, 340px); opacity: .92; left: calc(var(--size) * -.46); bottom: calc(var(--size) * -.58); }
/* faíscas perto do título (piscam devagar: ≤ 0,4 Hz) */
#oportunidade .op-spark { position: absolute; pointer-events: none; animation: twinkle 3.4s ease-in-out infinite; }
#oportunidade .op-spark--1 { --size: clamp(16px, 1.5vw, 28px); left: 101%; top: -14%; }
#oportunidade .op-spark--2 { --size: clamp(10px, .9vw, 18px); left: 93%; top: 38%; animation-delay: -1.3s; }
#oportunidade .op-spark--3 { --size: clamp(12px, 1.1vw, 22px); left: -3%; top: -30%; animation-delay: -2.4s; }
.reduced #oportunidade .op-spark { animation: none; }
#oportunidade .op-credit { position: absolute; z-index: 4; right: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter))); bottom: clamp(10px, 1.8vh, 20px); }

/* ---- as três faixas ---- */
#oportunidade .op-wrap { position: relative; z-index: 3; height: 100%; display: grid;
  grid-template-rows: auto minmax(var(--op-gz), 1fr) auto minmax(0, .5fr);
  padding-top: calc(var(--top-safe) + clamp(10px, 2.4vh, 30px)); padding-bottom: clamp(38px, 6vh, 72px);
  --op-gz: clamp(96px, 17vh, 240px);            /* faixa do fio + fita mínima */
  /* largura da bola: pela largura da fileira (cqi da .op-pillars, que é contêiner) e pela altura da tela */
  --op-ball: clamp(92px, min(15.2cqi, 20vh), 330px); }

/* cabeçalho: título (7 colunas) e linha fina (5) lado a lado, pelo pé */
#oportunidade .op-head { grid-row: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
#oportunidade .op-title-wrap { grid-column: 1 / 8; position: relative; container-type: inline-size; transform-origin: 0 0; }
/* o título usa o token do núcleo (.ch-title: --title-fs, ~60 px no 1440 e ~74 no 1920) com teto pela coluna: a linha
   mais larga ("UMA OPORTUNIDADE" = 11,3 em na Josefin 400) nunca passa das 7 colunas (--title-em 11,5). As duas
   linhas são quebras fixas (spans nowrap), não um nowrap encolhido. */
#oportunidade .op-title { --title-em: 11.5; max-width: none; }
#oportunidade .op-t1, #oportunidade .op-t2 { display: block; width: fit-content; white-space: nowrap; }
#oportunidade .op-title .fr { font-size: 1.12em; }
#oportunidade .op-lede-wrap { grid-column: 8 / 13; transform-origin: 0 0; padding-bottom: .3em; padding-left: clamp(8px, 1.6vw, 40px); }
#oportunidade .op-lede { max-width: 36ch; }

/* ---- os pilares ---- */
#oportunidade .op-pillars { grid-row: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); container-type: inline-size; }
#oportunidade .op-pillar { display: grid; justify-items: center; align-content: start; gap: clamp(12px, 2.2vh, 24px); text-align: center; min-width: 0; }
/* a vaga da bola no layout (a bola fica nela; a fita sobe até o fio) */
#oportunidade .op-hang { position: relative; width: var(--op-ball); aspect-ratio: 100 / 128; --len: 120px; }
#oportunidade .op-swing { position: absolute; left: 0; right: 0; top: calc(var(--len) * -1); bottom: 0; }
#oportunidade .op-sway { position: absolute; inset: 0; transform-origin: 50% 0; }
/* fita de cetim: do fio até a argola da bola (a argola fica ~3% abaixo do topo da vaga) */
#oportunidade .op-ribbon { position: absolute; left: 50%; top: 0; width: clamp(7px, calc(var(--op-ball) * .065), 13px); height: calc(var(--len) + var(--op-ball) * .035); margin-left: calc(clamp(7px, calc(var(--op-ball) * .065), 13px) / -2); transform-origin: 50% 0;
  background: linear-gradient(90deg, #7a4a14, #d9973f 18%, #ffe6b0 46%, #e9a24b 66%, #8a5418); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
#oportunidade .op-ribbon::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, rgba(255, 255, 255, 0) 1px 3px); }
/* laço pequeno onde a fita amarra no fio */
#oportunidade .op-knot { position: absolute; left: 50%; top: calc(var(--op-ball) * -.09); width: calc(var(--op-ball) * .36); height: auto; aspect-ratio: 240 / 170; margin-left: calc(var(--op-ball) * -.18); max-width: none; color: var(--gold); overflow: visible; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .45)); }
#oportunidade .op-drop { position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 100 / 128; }
#oportunidade .op-ball { position: absolute; inset: 0; display: block; cursor: pointer; border-radius: 50% 50% 46% 46% / 30% 30% 50% 50%; -webkit-tap-highlight-color: transparent; }
#oportunidade .op-ball:focus-visible { outline-offset: 6px; }
#oportunidade .op-bauble { position: relative; z-index: 1; width: 100%; height: 100%; max-width: none; overflow: visible; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45)); }
/* halo atrás da bola e o clarão do fim (acendem pelo JS) */
/* círculos de 1,9 × a bola, centrados no miolo da esfera (76/128 da altura) */
#oportunidade .op-halo, #oportunidade .op-flare { position: absolute; left: -45%; right: -45%; top: -14.8%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0; }
#oportunidade .op-halo { background: radial-gradient(closest-side, var(--halo), rgba(233, 162, 75, .16) 52%, rgba(233, 162, 75, 0)); }
#oportunidade .op-flare { z-index: 3; background: radial-gradient(closest-side, rgba(255, 246, 220, .55), rgba(247, 201, 120, .2) 44%, rgba(247, 201, 120, 0)); }
/* a bola acende por dentro: luz quente no miolo da esfera (a esfera é o círculo (50, 76) r 48 do #bauble) */
#oportunidade .op-inner { position: absolute; z-index: 2; left: 2%; right: 2%; top: 21.9%; aspect-ratio: 1; border-radius: 50%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 52%, rgba(255, 244, 214, .95), rgba(255, 206, 130, .55) 30%, rgba(233, 162, 75, .14) 58%, rgba(233, 162, 75, 0) 72%); }
/* o ícone do pilar em linha dourada, no meio da esfera */
#oportunidade .op-icon { position: absolute; z-index: 3; left: 28%; width: 44%; top: 42.2%; height: auto; aspect-ratio: 1; max-width: none; overflow: visible; color: var(--icon-c); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }

#oportunidade .op-text { display: grid; gap: .4em; justify-items: center; max-width: 30ch; }
#oportunidade .op-h { color: var(--gold-2); white-space: nowrap; }
#oportunidade .op-text .body { font-size: calc((clamp(15px, .5vw + 9.6px, 18.5px)) * var(--ts, 1)); line-height: 1.45; color: var(--text-2); }

/* ---- telas baixas (1280 × 720): bola um pouco menor, faixa do fio mais curta ---- */
@media (max-height: 760px) {
  /* 1280 × 720: o token já traz o título para ~48 px e ele cabe em 6 colunas; a linha fina volta a ter 6 (3 linhas, não 4) */
  #oportunidade .op-title-wrap { grid-column: 1 / 7; }
  #oportunidade .op-lede-wrap { grid-column: 7 / 13; }
  #oportunidade .op-wrap { --op-gz: clamp(84px, 14vh, 120px); --op-ball: clamp(84px, min(12.5cqi, 18vh), 150px); padding-bottom: 30px; }
  #oportunidade .op-pillar { gap: 10px; }
}

/* ---- em pé (tablet 1024 × 1366): título em largura cheia, linha fina embaixo dele ---- */
@media (orientation: portrait) {
  #oportunidade .op-head { row-gap: 18px; }
  #oportunidade .op-title-wrap { grid-column: 1 / -1; }
  #oportunidade .op-lede-wrap { grid-column: 1 / 11; padding-left: 0; }
  #oportunidade .op-wrap { --op-gz: clamp(110px, 12vh, 200px); --op-ball: clamp(110px, 19cqi, 210px); grid-template-rows: auto minmax(var(--op-gz), 1.1fr) auto minmax(0, .8fr); }
}

/* sem movimento: a timeline já leva tudo ao estado final; nada fica escondido pelo CSS */