/* Family video page. Inherits the invite's night + gold system (Bebas Neue + Inter, --sky/--gold),
   layered with the film's motifs: stars, dotted BND→TLV flight, yellow name blocks, Israeli blue. */
:root{
  --bg:#0E1A2F; --sky:#0B1526; --panel:#162540; --line:#2E4470;
  --fg:#fff; --muted:#C9D3E6; --dim:#8FA0C2;
  --gold:#F2B93B; --gold-ink:#1A1403;
  --name:#FFC93C; --il:#0038B8; --navy:#0B1638;
  --display:'Bebas Neue',Impact,'Arial Narrow',sans-serif;
  --body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--sky);color:var(--fg);font-family:var(--body);line-height:1.5}
body{min-height:100svh;overflow-x:hidden}
.sky{position:fixed;inset:0;width:100%;height:100%;z-index:0}
.sky .pin text{font:700 15px var(--body);letter-spacing:.18em;fill:var(--gold)}
#plane{offset-path:path("M150 300 C 470 80, 960 70, 1290 250");offset-rotate:auto;offset-distance:100%}
.stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px;
  padding:max(28px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.intro{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:560px}
.flap{display:inline-flex;gap:2px;font:800 12px/1 var(--body);letter-spacing:.06em;color:var(--name);text-transform:uppercase}
.flap .c{display:inline-block;width:1.15em;padding:6px 0;background:#0A0F1C;border:1px solid #24324F;border-radius:3px;text-align:center;position:relative;box-shadow:inset 0 -1px 0 rgba(255,255,255,.05)}
.flap .c::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.6)}
.flap .c.sp{width:.5em;background:transparent;border-color:transparent;box-shadow:none}
.flap .c.sp::after{display:none}
h1{margin:4px 0 0;font-weight:400;display:flex;flex-direction:column;align-items:center;gap:8px}
.hb{font-family:var(--display);font-size:clamp(44px,12vw,72px);line-height:.9;letter-spacing:.02em}
.names{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:min(100%,460px)}
.nb{display:block;text-align:center;font-family:var(--display);font-size:clamp(32px,9vw,54px);line-height:1;padding:.14em 0 .06em;
  background:var(--name);color:var(--navy);border-radius:10px;box-shadow:0 6px 0 #C9951F,0 10px 26px rgba(255,201,60,.28)}
.amp{font-family:var(--display);font-size:clamp(28px,8vw,44px);color:var(--fg)}
.sub{margin:6px 0 0;color:var(--muted);font-size:16px;font-weight:600;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.flag{width:30px;height:22px;flex:none;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.meta{margin:0;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.meta .dot{color:var(--dim)}
/* the 9:16 frame */
.frame{position:relative;width:100%;max-width:440px;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:var(--navy);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 60px rgba(76,123,224,.35),0 24px 60px rgba(0,0,0,.55)}
.poster{all:unset;cursor:pointer;position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:9% 6% 8%;
  background:var(--navy);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.poster:focus-visible{outline:3px solid var(--gold);outline-offset:-6px;border-radius:22px}
.globe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.75}
.poster::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,22,56,.85) 0%,rgba(11,22,56,0) 35%,rgba(11,22,56,0) 65%,rgba(11,22,56,.9) 100%)}
.poster>:not(.globe){position:relative}
.poster-top{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.kicker{font:700 11px var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--gold)}
.ptitle{font:400 clamp(38px,11vw,52px)/.95 var(--display);letter-spacing:.02em;color:#fff}
.ptitle span{color:var(--name)}
.play{position:relative;width:96px;height:96px;display:grid;place-items:center}
.play svg{width:96px;height:96px;filter:drop-shadow(0 0 22px rgba(242,185,59,.7));transition:transform .2s}
.poster:hover .play svg{transform:scale(1.06)}
.ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,201,60,.7)}
.poster-foot{font:600 13px var(--body);color:var(--muted);letter-spacing:.04em}
.poster.gone{opacity:0;transform:scale(1.08);pointer-events:none}
.frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.loading{position:absolute;inset:0;display:grid;place-items:center;font:700 11px var(--body);letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.spark{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;pointer-events:none;z-index:3}
.foot{font-size:12px;color:var(--dim);text-align:center}
.foot a{color:var(--muted);text-underline-offset:3px;text-decoration-color:var(--line)}
/* mobile: video uses the full width */
@media (max-width:520px){
  .frame{max-width:none;border-radius:16px}
}
/* desktop: copy left, portrait frame right */
@media (min-width:980px){
  .stage{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:72px;min-height:100svh;padding-top:40px;padding-bottom:40px}
  .intro{align-items:flex-start;text-align:left;max-width:480px}
  h1{align-items:flex-start}.hb{font-size:84px}.nb{font-size:56px}.names{width:440px}
  .sub,.meta{justify-content:flex-start}.sub{font-size:18px}
  .frame{width:auto;height:min(90vh,782px);max-height:90vh}
  .foot{position:absolute;bottom:14px;left:0;right:0}
}
@media (prefers-reduced-motion:no-preference){
  .tw{animation:twinkle var(--d,4s) ease-in-out var(--dl,0s) infinite alternate}
  @keyframes twinkle{from{opacity:.25}to{opacity:1}}
  #routeDots{stroke-dasharray:0 14;animation:none}
  #plane{animation:fly 4.2s cubic-bezier(.45,.05,.35,1) .6s both}
  @keyframes fly{from{offset-distance:0%;scale:.6}to{offset-distance:100%;scale:1.25}}
  .pin-end .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.4s ease-in-out 4.8s infinite}
  @keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.5);opacity:.4}}
  .hb{animation:rise .7s cubic-bezier(.2,.8,.2,1) .2s both}
  .names .nb,.names .amp{animation:pop .55s cubic-bezier(.3,1.6,.5,1) both}
  .names .nb:first-child{animation-delay:.55s}.names .amp{animation-delay:.7s}.names .nb:last-child{animation-delay:.55s}
  .sub,.meta{animation:rise .7s ease-out .9s both}
  .frame{animation:rise .9s cubic-bezier(.2,.8,.2,1) .4s both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes pop{from{opacity:0;transform:scale(.4) rotate(-4deg)}to{opacity:1;transform:none}}
  .ring{animation:ring 2.2s ease-out infinite}.ring.r2{animation-delay:1.1s}
  @keyframes ring{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}
  .play svg{animation:breathe 2.2s ease-in-out infinite}
  @keyframes breathe{50%{transform:scale(1.05)}}
  .flap .c.flip{animation:flip .06s linear}
  @keyframes flip{50%{transform:scaleY(.2)}}
}
@media (prefers-reduced-motion:reduce){ .ring{display:none} }