/* Kids promo intro with its landing page over the 360° tour, and the fly-through dialog from the All rooms menu (the kids
   layer: site-polish/film/intro-v3, patch B). The school's language: navy and gold, PP Fragment Serif for the line, Inter
   for the buttons, square edges. Portrait and landscape alike; turning the phone changes only the framing.
   1. The promo loops silently, with "Tap for sound" ("Click for sound" with a mouse) at the top and Skip in the top corner.
      The children's words are burned into the bottom centre of the picture, so the picture fills the screen only where that
      keeps them in it (screens from 6:5 to 2:1); portrait phones and very wide screens show the whole frame on navy.
   2. The landing page is patch A's approved fly-through intro, full-bleed at every size: the film muted behind the mark and
      the line, and Start the tour at the bottom. Landscape: A's layout; at the film's own title card the HTML mark and line
      give way to it, and the film holds on it. Portrait: the mark and the line sit in the middle and stay; at the title card
      (which a portrait crop would cut) the film fades to the card's navy.
   3. Promo to landing: an 800 ms cross-dissolve with a slight scale; instant with reduced motion. */
.intro{display:none}
html.intro-on .intro{display:block;position:fixed;inset:0;z-index:20;overflow:hidden;background:var(--navy,#042339);color:#fff;opacity:1;transition:opacity .45s ease}
html.intro-on .intro.is-leaving{opacity:0;pointer-events:none}
.intro-promo,.intro-landing{position:absolute;inset:0}
.intro-promo{z-index:1;transition:opacity .8s ease,transform .8s ease,visibility 0s linear 0s}
.intro-landing{z-index:0;opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .8s ease,transform .8s ease,visibility 0s linear .8s}
.intro.is-landing .intro-promo{opacity:0;visibility:hidden;transform:scale(.985);pointer-events:none;transition:opacity .8s ease,transform .8s ease,visibility 0s linear .8s}
.intro.is-landing .intro-landing{opacity:1;visibility:visible;transform:none;transition:opacity .8s ease,transform .8s ease,visibility 0s linear 0s}

/* 1. The promo. */
.intro-promo-media{position:absolute;inset:0}
.intro-promo-poster,.intro-promo-video{position:absolute;inset:0;width:100%;height:100%}
.intro-promo-poster{background:var(--navy,#042339) center/contain no-repeat;background-image:url(media/film/lanaar-promo-poster-1080.jpg)}
.intro-promo-video{object-fit:contain;object-position:50% 50%;background:transparent}
@media (max-width:900px),(max-height:500px){.intro-promo-poster{background-image:url(media/film/lanaar-promo-poster-720.jpg)}}
@media (min-aspect-ratio:6/5) and (max-aspect-ratio:2/1){.intro-promo-poster{background-size:cover}.intro-promo-video{object-fit:cover}}
.intro-top{position:absolute;z-index:3;top:max(16px,env(safe-area-inset-top));left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;pointer-events:none;transition:opacity .4s ease,visibility 0s linear 0s}
.intro-top>button{pointer-events:auto}
.intro.is-landing .intro-top{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.intro-sound{grid-column:2;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border:0;border-radius:0;
  background:var(--gold,#BC9E5D);color:var(--navy,#042339);cursor:pointer;box-shadow:0 6px 24px rgba(4,35,57,.35);
  font:600 13px/1 var(--sans,Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.intro-sound svg{width:22px;height:22px;flex:none}
.intro-sound:hover{background:var(--gold-light,#D3BC8E)}
.intro-sound:focus-visible{outline:2px solid #fff;outline-offset:3px}
.intro.is-sound .intro-sound{display:none}
.intro-skip{grid-column:3;justify-self:end;min-width:72px;min-height:48px;padding:0 18px;border:1px solid rgba(255,255,255,.4);border-radius:0;background:rgba(4,35,57,.6);color:#fff;cursor:pointer;
  font:500 12px/1 var(--sans,Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);letter-spacing:.14em;text-transform:uppercase}
.intro-skip:hover{background:rgba(4,35,57,.85)}
.intro-skip:focus-visible{outline:2px solid var(--gold-light,#D3BC8E);outline-offset:3px}
@media (max-width:560px){.intro-top{grid-template-columns:auto 1fr auto}.intro-sound{grid-column:1}}
@media (max-width:360px){.intro-sound{padding:0 14px 0 12px;gap:8px;letter-spacing:.1em}.intro-skip{padding:0 14px}}

/* 2. The landing page (patch A's approved design, full-bleed). */
.intro-media{position:absolute;inset:0;z-index:0;transition:opacity .6s ease}
.intro-poster,.intro-hold,.intro-video{position:absolute;inset:0;width:100%;height:100%}
.intro-poster,.intro-hold{background:var(--navy,#042339) center/cover no-repeat}
.intro-poster{background-image:url(media/film/lanaar-film-poster-v2-1080.jpg)}
.intro-hold{background-image:url(media/film/lanaar-film-hold-1080.jpg);opacity:0}
.intro-video{object-fit:cover;object-position:50% 50%;background:transparent}
@media (max-width:900px),(max-height:500px){
  .intro-poster{background-image:url(media/film/lanaar-film-poster-v2-720.jpg)}
  .intro-hold{background-image:url(media/film/lanaar-film-hold-720.jpg)}
}
.intro.is-held .intro-hold{opacity:1}
.intro.is-held .intro-video{visibility:hidden}
/* Legibility over the moving picture; gone once the film reaches its own title card. */
.intro-shade{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity .6s ease;
  background:linear-gradient(to top,rgba(4,35,57,.82) 0,rgba(4,35,57,.42) 30%,rgba(4,35,57,0) 56%),linear-gradient(to bottom,rgba(4,35,57,.5) 0,rgba(4,35,57,0) 20%)}
.intro.is-card .intro-shade{opacity:0}
.intro-panel{position:absolute;z-index:2;left:max(24px,env(safe-area-inset-left));right:max(24px,env(safe-area-inset-right));
  bottom:max(32px,calc(env(safe-area-inset-bottom) + 20px));display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.intro-mark{display:block;height:44px;width:auto;color:#fff;transition:opacity .6s ease}
.intro-line{margin:0;max-width:18ch;font-family:var(--serif,"PP Fragment Serif",Georgia,serif);font-weight:400;font-size:clamp(32px,4.4vw,58px);
  line-height:1.04;letter-spacing:-.005em;color:#F7F5F0;text-wrap:balance;transition:opacity .6s ease}
.intro.is-card .intro-mark,.intro.is-card .intro-line{opacity:0}   /* the film's title card carries the mark and the line */
.intro-start{min-height:52px;padding:0 36px;border:0;border-radius:0;background:var(--gold,#BC9E5D);color:var(--navy,#042339);cursor:pointer;
  font:600 13px/1 var(--sans,Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.intro-start:hover{background:var(--gold-light,#D3BC8E)}
.intro-start:focus-visible{outline:2px solid #fff;outline-offset:3px}
.intro-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (max-height:500px){
  .intro-top{top:max(10px,env(safe-area-inset-top))}
  .intro-sound,.intro-skip{min-height:44px}
  .intro-panel{gap:10px;bottom:max(18px,calc(env(safe-area-inset-bottom) + 12px))}
  .intro-mark{height:30px}
  .intro-line{font-size:26px}
  .intro-start{min-height:44px;padding:0 28px}
}
@media (max-width:360px){.intro-line{font-size:28px}.intro-start{padding:0 26px}}
/* Portrait: the film fills the screen too; the mark and the line sit in the middle, Start the tour stays at the bottom, and
   at the film's title card the film fades to navy while the HTML mark and line stay (they are the card). */
@media (max-aspect-ratio:5/4){
  .intro-shade{background:linear-gradient(to top,rgba(4,35,57,.8) 0,rgba(4,35,57,.3) 30%,rgba(4,35,57,.3) 70%,rgba(4,35,57,.55) 100%)}
  .intro-panel{top:max(80px,calc(env(safe-area-inset-top) + 64px))}
  .intro-mark{margin-top:auto}
  .intro-line{margin-bottom:auto}
  .intro.is-card .intro-media{opacity:0}
  .intro.is-card .intro-mark,.intro.is-card .intro-line{opacity:1}
}
@media (max-aspect-ratio:5/4) and (max-height:520px){.intro-panel{top:max(24px,calc(env(safe-area-inset-top) + 16px));gap:12px}.intro-mark{height:30px}.intro-line{font-size:24px}}

/* The fly-through: the approved 30 s film in its own modal dialog (native controls; silent). */
dialog#flythrough{position:fixed;inset:0;margin:0;width:100vw;height:100%;max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:var(--navy,#042339);color:#fff;overflow:hidden}
dialog#flythrough[open]{display:flex;flex-direction:column}
dialog#flythrough::backdrop{background:rgba(4,35,57,.92)}
dialog#flythrough:focus,dialog#flythrough:focus-visible{outline:none}
.flythrough-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:max(14px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left))}
.flythrough-head h2{margin:0;font-family:var(--serif,"PP Fragment Serif",Georgia,serif);font-weight:400;font-size:clamp(22px,2.4vw,32px);line-height:1.1;color:#F7F5F0}
.flythrough-close{flex:none;width:48px;height:48px;display:grid;place-items:center;padding:0;border:1px solid rgba(255,255,255,.4);border-radius:0;background:rgba(4,35,57,.6);color:#fff;cursor:pointer}
.flythrough-close:hover{background:rgba(255,255,255,.08)}
.flythrough-close:focus-visible{outline:2px solid var(--gold-light,#D3BC8E);outline-offset:3px}
.flythrough-close svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}
.flythrough-frame{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:0 max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
.flythrough-video{display:block;width:100%;height:100%;max-width:1920px;object-fit:contain;background:#000}
.flythrough-video:focus-visible{outline:2px solid var(--gold-light,#D3BC8E);outline-offset:2px}
/* The All rooms menu link. */
.places-foot .film-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--navy,#042339);font:500 13px/1.2 var(--sans,Inter,-apple-system,"Segoe UI",Roboto,Arial,sans-serif);text-decoration:underline;text-underline-offset:3px}
.places-foot .film-link svg{width:18px;height:18px;flex:none;fill:currentColor}
/* SW77: tap anywhere for sound, and the scrub bar. intro.js sets .is-anywhere (and adds .intro-scrub) only while its silent
   loop runs, so none of this applies anywhere else. The sound button becomes the hint; the scrub bar shows during the play
   with sound, a slim navy and gold track at the bottom, clear of the captions, with a 44 px tall target. */
html.intro-on .intro.is-anywhere{cursor:pointer;touch-action:manipulation}
html.intro-on .intro.is-anywhere.is-sound{cursor:auto}
.intro.is-anywhere .intro-sound{background:rgba(4,35,57,.72);color:#F7F5F0;border:1px solid rgba(188,158,93,.95);box-shadow:none}
.intro.is-anywhere .intro-sound svg{color:var(--gold,#BC9E5D)}
.intro.is-anywhere .intro-sound:hover{background:rgba(4,35,57,.86)}
@media (max-width:560px){.intro.is-anywhere .intro-sound{white-space:normal;text-align:left;line-height:1.15;max-width:calc(100vw - 132px)}}
@media (max-width:360px){.intro.is-anywhere .intro-sound{letter-spacing:.08em;padding:0 12px 0 10px;gap:8px}}
.intro.is-anywhere .intro-scrub{display:none;position:absolute;z-index:3;left:max(16px,env(safe-area-inset-left));right:max(16px,env(safe-area-inset-right));
  bottom:max(4px,env(safe-area-inset-bottom));height:44px;cursor:pointer;touch-action:none;outline:none}
.intro.is-anywhere.is-sound .intro-scrub{display:block}
.intro.is-anywhere.is-landing .intro-scrub{display:none}
.intro-scrub-track{position:absolute;left:0;right:0;bottom:12px;height:4px;background:rgba(4,35,57,.62);box-shadow:0 0 0 1px rgba(247,245,240,.28)}
.intro-scrub-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold,#BC9E5D)}
.intro-scrub-thumb{position:absolute;bottom:7px;left:0;width:14px;height:14px;margin-left:-7px;background:var(--gold,#BC9E5D);box-shadow:0 0 0 2px #F7F5F0}
.intro-scrub:focus-visible .intro-scrub-track{box-shadow:0 0 0 2px #F7F5F0}
.intro-scrub:focus-visible .intro-scrub-thumb{box-shadow:0 0 0 2px #F7F5F0,0 0 0 4px var(--gold,#BC9E5D)}
.intro-scrub.is-dragging .intro-scrub-thumb{width:16px;height:16px;margin-left:-8px;bottom:6px}
@media (prefers-reduced-motion:reduce){.intro,.intro *{transition:none!important}}