/* ══════════════════════════════════════════════════════════════════════
   ITALY LIONS — REELS ⇄ LIONGRAM, ONE SWIPE APART   (il-rooms.css)

   Owner, 2026-10-15: "like Reels, LionGram needs its own unique logo;
   Reels and LionGram change any time with a swipe, use new technology".
   Loaded by reels.html and liongram.html ONLY — the page-to-page
   animation below therefore runs only between these two rooms.

   1. THE SWITCH lives in the upper menu, in the same spot on both pages
      (never over a video — see "NOTHING FLOATS OVER THE VIDEO" in
      reels.html). One tap on the other mark changes room.
   2. CROSS-DOCUMENT VIEW TRANSITIONS: the page slides like a carousel
      while the menu bar and the bottom bar stay perfectly still.
      Browsers without it (older Safari, Firefox) simply open the page.
   ══════════════════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* The bars do not move; only the room slides. */
.navbar { view-transition-name: il-navbar; }
.bottom-nav { view-transition-name: il-bnav; }
::view-transition-group(il-navbar), ::view-transition-group(il-bnav) { animation: none; }
::view-transition-old(il-navbar), ::view-transition-old(il-bnav) { animation: none; opacity: 0; }
::view-transition-new(il-navbar), ::view-transition-new(il-bnav) { animation: none; }

html:active-view-transition-type(il-room-next)::view-transition-old(root) { animation: il-room-out-l .36s cubic-bezier(.3,.7,.2,1) both; }
html:active-view-transition-type(il-room-next)::view-transition-new(root) { animation: il-room-in-r .36s cubic-bezier(.3,.7,.2,1) both; }
html:active-view-transition-type(il-room-prev)::view-transition-old(root) { animation: il-room-out-r .36s cubic-bezier(.3,.7,.2,1) both; }
html:active-view-transition-type(il-room-prev)::view-transition-new(root) { animation: il-room-in-l .36s cubic-bezier(.3,.7,.2,1) both; }
@keyframes il-room-out-l { to { transform: translateX(-34%); opacity: 0; } }
@keyframes il-room-in-r { from { transform: translateX(34%); opacity: 0; } }
@keyframes il-room-out-r { to { transform: translateX(34%); opacity: 0; } }
@keyframes il-room-in-l { from { transform: translateX(-34%); opacity: 0; } }

/* ── THE SWITCH ───────────────────────────────────────────────────── */
.il-rooms { display: inline-flex; align-items: center; gap: 2px; padding: 3px; flex: none; position: relative;
  border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(201,162,39,.34); }
/* The same spot on both pages: flush against the menu cluster on the
   right. LionGram pushes it there itself; on Reels the gold + already
   takes the free space, so the switch simply follows it. */
.navbar .il-rooms { margin: 0 8px 0 auto; }
.navbar .reels-plus + .il-rooms { margin-left: 0; }
.navbar .il-rooms + .nav-actions { margin-left: 0; }
.navbar .il-rooms ~ .hamburger { margin-left: 4px; }
.il-room { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 999px;
  -webkit-tap-highlight-color: transparent; transition: background .2s, box-shadow .2s, transform .15s; }
.il-room img { display: block; width: 26px; height: 26px; border-radius: 7px; opacity: .5; filter: saturate(.7);
  transition: opacity .2s, filter .2s, transform .25s cubic-bezier(.2,.8,.2,1); }
.il-room[aria-current="page"] { background: radial-gradient(circle, rgba(255,227,138,.24), rgba(201,162,39,.06) 72%);
  box-shadow: inset 0 0 0 1px rgba(255,227,138,.6), 0 0 14px rgba(201,162,39,.38); }
.il-room[aria-current="page"] img { opacity: 1; filter: none; }
@media (hover: hover) { .il-room:not([aria-current]):hover img { opacity: .92; filter: none; transform: scale(1.06); } }
/* The gold press state the rest of the mobile navigation uses. */
.il-room:active { transform: scale(.9); background: rgba(201,162,39,.22); }
.il-room:focus-visible { outline: 2px solid #FFE38A; outline-offset: 2px; }
/* Small phones: the bar also carries the logo, the wordmark, Reels' + and the menu. */
@media (max-width: 374px) {
  .il-room { width: 30px; height: 30px; }
  .il-room img { width: 22px; height: 22px; border-radius: 6px; }
  .navbar .il-rooms { margin-right: 4px; }
  .navbar .reels-plus { margin-right: 6px !important; }
}

/* First two visits: the switch glows once and says what it does. */
.il-rooms.il-rooms-hint { animation: il-rooms-glow 1.6s ease-in-out 2; }
@keyframes il-rooms-glow { 50% { box-shadow: 0 0 0 4px rgba(201,162,39,.28), 0 0 22px rgba(201,162,39,.55); } }
.il-rooms-tip { position: absolute; top: calc(100% + 10px); right: -6px; z-index: 5; padding: 7px 11px; border-radius: 10px;
  background: #1a160c; border: 1px solid rgba(255,227,138,.45); color: #FFE38A; font: 700 .74rem/1.2 Inter, system-ui, sans-serif;
  white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.5); pointer-events: none; animation: il-rooms-tip 3.4s ease both; }
.il-rooms-tip::before { content: ''; position: absolute; top: -6px; right: 22px; width: 10px; height: 10px; transform: rotate(45deg);
  background: #1a160c; border-left: 1px solid rgba(255,227,138,.45); border-top: 1px solid rgba(255,227,138,.45); }
@keyframes il-rooms-tip { 0% { opacity: 0; transform: translateY(-4px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ── THE SWIPE: the other room's mark slides in from the edge ─────── */
.il-room-peek { position: fixed; top: 50%; z-index: 1200; display: grid; place-items: center; width: 66px; height: 66px;
  margin-top: -33px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: rgba(12,10,6,.8); border: 1px solid rgba(255,227,138,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); transition: opacity .12s, box-shadow .2s; }
.il-room-peek img { width: 42px; height: 42px; border-radius: 11px; display: block; }
.il-room-peek.from-right { right: 12px; }
.il-room-peek.from-left { left: 12px; }
.il-room-peek.on { opacity: 1; }
.il-room-peek.ready { box-shadow: 0 10px 30px rgba(0,0,0,.5), 0 0 0 6px rgba(201,162,39,.4), 0 0 26px rgba(201,162,39,.6); }

/* Inside a playing video every touch belongs to the provider's frame, so
   two thin swipe zones sit just inside the video's left and right edges —
   in from the screen edge (the phone's own Back gesture lives there) and
   clear of the corner buttons. Invisible; touch screens only. */
.il-room-edge { position: absolute; top: 18%; bottom: 26%; width: 30px; z-index: 6; touch-action: pan-y; }
.il-room-edge.l { left: 22px; }
.il-room-edge.r { right: 22px; }
@media (hover: hover) and (pointer: fine) { .il-room-edge { display: none; } }
/* The smallest phones (≤340px): the wordmark beside the lion steps aside so
   the menu button stays on screen; the lion logo itself remains. */
@media (max-width: 340px) { .navbar .nav-logo-text { display: none; } }