:root{
      --img-title: url('/assets/title-wordmark.png');
      --img-book: url('/assets/book-var.jpg');
    }

    :root{
      --img-day: url('/assets/bg-day.jpg');
      --img-night: url('/assets/bg-night.jpg');
    }
  :root{
    --sky-top: #3f6a92;
    --sky-mid: #a9cfe0;
    --sky-horizon: #f3d9a4;
    --sand-far: #d9ab6d;
    --sand-near: #c98a4b;
    --sand-deep: #96602f;
    --tent-brown: #7a4a2c;
    --tent-dark: #5c3620;
    --cream: #f7ecd8;
    --ink: #2c2015;
    --gold: #e0a94a;
    --ember: #b5482f;
    --night-deep: #16223f;
    --star-glow: #ffe9ad;
    --panel-bg: #fbf3e3;
    font-family: 'Karla', sans-serif;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0; height:100%; overflow:hidden;
    color:var(--ink);
  }
  .stage{
    position:relative;
    width:100vw; height:100vh;
    background:#1a2440;
    overflow:hidden;
  }
  .bg-layer{
    position:absolute; inset:0;
    background-size: cover;
    background-position: center bottom;
    transition: opacity 1.4s ease;
  }
  .bg-day{ background-image: var(--img-day); opacity:1; }
  .bg-night{ background-image: var(--img-night); opacity:0; }
  .stage.dusk .bg-night{ opacity:1; }

  /* ---- sun / star (kept only as an interactive marker over the real art) ---- */
  /* ---- Omar standing by the door ---- */
  .omar-char{
    position:absolute; bottom:14%; left:59%;
    width:150px; cursor:pointer;
    filter: drop-shadow(0 10px 14px rgba(0,0,0,.35));
    transition: transform .2s ease, filter .2s ease;
    z-index:4;
  }
  .omar-char:hover{ transform: translateY(-4px) scale(1.03); filter: drop-shadow(0 14px 18px rgba(0,0,0,.4)); }

  .star{
    position:absolute; top:10%; left:52%;
    width:30px; height:30px;
    cursor:pointer;
    z-index:5;
  }
  .star::before{
    content:"";
    position:absolute; inset:-16px;
    background: radial-gradient(circle, var(--star-glow) 0%, rgba(255,233,173,0) 70%);
    animation: twinkle 3.2s ease-in-out infinite;
  }
  .star svg{position:relative; width:100%; height:100%; filter: drop-shadow(0 0 6px rgba(255,240,190,.8));}
  @keyframes twinkle{
    0%,100%{ transform:scale(1); opacity:.85;}
    50%{ transform:scale(1.3); opacity:1;}
  }

  /* ---- hotspots ---- */
  .hotspot{
    position:absolute;
    cursor:pointer;
    display:flex; flex-direction:column; align-items:center;
    z-index:5;
    -webkit-tap-highlight-color: transparent;
  }
  .marker{
    width:24px; height:24px; border-radius:50%;
    background: radial-gradient(circle, #fff8e6 0%, var(--gold) 70%);
    box-shadow: 0 0 0 5px rgba(255,255,255,.3), 0 2px 10px rgba(0,0,0,.45);
    animation: pulse 2.6s ease-in-out infinite;
    transition: transform .25s ease;
  }
  .hotspot:hover .marker, .hotspot.active .marker{ transform: scale(1.25); }
  @keyframes pulse{
    0%,100%{ box-shadow: 0 0 0 4px rgba(255,255,255,.25), 0 2px 8px rgba(0,0,0,.25); }
    50%{ box-shadow: 0 0 0 9px rgba(255,255,255,.12), 0 2px 12px rgba(0,0,0,.3); }
  }
  .tag{
    position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(6px);
    background: rgba(28,20,12,.92); color:var(--cream);
    padding:10px 14px; border-radius:10px; width:190px;
    opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease;
    text-align:left;
  }
  .hotspot:hover .tag, .hotspot:focus-visible .tag{ opacity:1; transform:translateX(-50%) translateY(0); }
  .tag .eyebrow{ display:block; font-size:11px; letter-spacing:.03em; color:var(--gold); font-weight:600; margin-bottom:2px;}
  .tag .title{ display:block; font-family:'Fraunces', serif; font-size:16px; line-height:1.2; margin-bottom:2px;}
  .tag .sub{ display:block; font-size:12px; opacity:.8;}

  .cast-spot .portrait{
    width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 3px 10px rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.4);
    font-size:18px; background:#caa06a;
    transition: transform .2s ease;
  }
  .cast-spot:hover .portrait, .cast-spot.active .portrait{ transform: scale(1.15); }
  .cast-spot .marker{ display:none; }

  /* ---- Tabor / Omar / sign / road / scroll positions are now set inline per-hotspot to match the real artwork ---- */

  /* ---- top label ---- */
  .title-card{
    position:absolute; top:28px; left:34px; z-index:6;
    display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  }
  .title-wordmark-wrap{
    position:relative;
    width: 350px;
    padding: 24px 20px 10px;
    overflow: visible;
  }
  .title-glow{
    position:absolute; inset:-10px;
    background: radial-gradient(ellipse 70% 75% at 45% 50%, rgba(255,255,255,.9) 0%, rgba(214,233,247,.55) 40%, rgba(214,233,247,0) 75%);
    filter: blur(4px);
    z-index:0;
  }
  .snow-field{
    position:absolute; inset:-34px -36px -18px -36px;
    overflow:hidden; pointer-events:none; z-index:0;
    /* soft edges: flakes fade out instead of being clipped by the box */
    -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 40%, rgba(0,0,0,0) 100%);
    mask-image:radial-gradient(ellipse 62% 58% at 50% 50%, #000 40%, rgba(0,0,0,0) 100%);
  }
  .snowflake{
    position:absolute; top:-10%; color:#fff;
    text-shadow: 0 0 4px rgba(255,255,255,.8);
    animation: snowfall linear infinite;
    opacity:.85;
  }
  @keyframes snowfall{
    0%{ transform: translateY(-10%) translateX(0) rotate(0deg); }
    50%{ transform: translateY(160%) translateX(10px) rotate(180deg); }
    100%{ transform: translateY(330%) translateX(-4px) rotate(360deg); }
  }
  .author-tag{
    position:relative; z-index:1;
    font-family:'Karla', sans-serif; font-weight:700; font-size:20px;
    letter-spacing:.12em; color:#fdf6e6;
    text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 10px rgba(0,0,0,.3);
    margin: 0 0 6px 6px;
    cursor:pointer; display:inline-block; pointer-events:auto; outline:none;
    transition: color .2s ease, transform .2s ease;
  }
  .author-tag::after{
    content:''; position:absolute; left:0; right:0; bottom:-3px; height:2px;
    background:var(--gold); transform:scaleX(0); transform-origin:left;
    transition: transform .25s ease;
  }
  .author-tag:hover, .author-tag:focus-visible{ color:#fff; transform:translateY(-1px); }
  .author-tag:hover::after, .author-tag:focus-visible::after{ transform:scaleX(1); }
  .author-tag-hint{
    position:absolute; left:100%; top:50%; margin-left:12px; white-space:nowrap;
    font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:none;
    background:rgba(20,12,6,.72); color:#fdf6e6; padding:4px 10px; border-radius:999px;
    opacity:0; transform:translate(-6px,-50%); pointer-events:none;
    transition: opacity .2s ease, transform .2s ease;
  }
  .author-tag:hover .author-tag-hint, .author-tag:focus-visible .author-tag-hint{ opacity:1; transform:translate(0,-50%); }
  .title-wordmark{
    position:relative; z-index:1;
    width:100%; display:block;
    filter: drop-shadow(0 0 5px rgba(30,30,45,.5)) drop-shadow(0 4px 10px rgba(0,0,0,.3));
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
    transform-origin: center bottom;
  }
  .title-wordmark:hover{
    transform: scale(1.08) rotate(-1deg);
  }
  .book-thumb{
    width:236px; cursor:pointer;
    margin-left: 65px;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,.35)) brightness(1.16) contrast(1.04) saturate(1.08);
    transform: rotate(-4deg);
    transition: transform .2s ease, filter .2s ease;
    flex-shrink:0;
  }
  .book-thumb:hover{ transform: rotate(-1.5deg) scale(1.04) translateY(-4px); filter: drop-shadow(0 18px 24px rgba(0,0,0,.4)) brightness(1.22) contrast(1.05) saturate(1.1); }

  .hint{
    position:absolute; top:30px; right:26px; z-index:6;
    background: rgba(28,20,12,.85); color:var(--cream);
    padding:9px 16px; border-radius:999px; font-size:13px;
  }

  /* ---- bottom dock ---- */
  .dock{
    position:absolute; left:50%; bottom:24px; transform:translateX(-50%);
    display:flex; align-items:flex-end; gap:10px;
    background: rgba(255,255,255,.4); backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    padding:16px 22px 14px; border-radius:28px;
    box-shadow: 0 12px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.5);
    z-index:6;
  }
  .dock-item{
    position:relative; display:flex; flex-direction:column; align-items:center;
    cursor:pointer;
  }
  .dock-item.hovered{ z-index:3; }
  .dock-icon-wrap{
    width:78px; height:78px;
    display:flex; align-items:center; justify-content:center;
    font-size:48px;
    transform-origin: bottom center;
    transition: transform .12s ease-out;
    will-change: transform;
  }
  .dock-label{
    width:78px; margin-top:2px;
    font-family:'Fraunces', serif; font-weight:600; font-size:15px;
    color:#4a3a28; text-align:center; line-height:1.15;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    transition: color .15s ease;
  }
  .dock-item.hovered .dock-label{ color:#1f160d; }
  .dock-dot{
    width:5px; height:5px; border-radius:50%; background:#3a2611;
    margin-top:4px; opacity:0; transition: opacity .2s ease;
  }
  .dock-item.active .dock-dot{ opacity:.75; }

  /* ---- panel ---- */
  .overlay{
    position:fixed; inset:0; background: rgba(20,14,8,.42);
    opacity:0; pointer-events:none; transition: opacity .25s ease;
    z-index:9;
  }
  .overlay.open{ opacity:1; pointer-events:auto; }

  /* ---- Game modal: sits above everything, blurs the whole site behind it ---- */
  .game-overlay{
    position:fixed; inset:0; z-index:50;
    /* Static pre-blurred snapshot of the site instead of a live backdrop-filter:
       a live blur forced constant re-compositing against the game's 60fps canvas
       and cut its frame rate roughly in half. This bakes the same look in at
       zero runtime cost. */
    background:
      linear-gradient(rgba(15,10,6,.55), rgba(15,10,6,.55)),
      url('/assets/css-extra.jpg') center/cover no-repeat;
    opacity:0; pointer-events:none;
    transition: opacity .28s ease;
    display:flex; align-items:center; justify-content:center;
  }
  .game-overlay.open{ opacity:1; pointer-events:auto; }
  .game-modal{
    position:relative;
    width:min(960px, 94vw);
    aspect-ratio:960/440;
    transform: scale(.96);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), width .28s ease, aspect-ratio .28s ease;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 30px 90px rgba(0,0,0,.55);
  }
  .game-modal.tall-modal{
    width:min(880px, 94vw, calc(90vh * 1.157));
    aspect-ratio:880/760;
  }
  .game-overlay.open .game-modal{ transform: scale(1); }
  .game-modal iframe{
    width:100%; height:100%; border:none; display:block; background:#2b1d14;
  }
  .panel{
    position:fixed; right:0; top:0; bottom:0;
    /* At least ~1/3 of the screen on desktop, so the drawer reads as a real
       focal element rather than a sliver. */
    width: clamp(500px, 34vw, 720px);
    background: rgba(60,44,30,.32);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-radius:28px 0 0 28px;
    border-left:1px solid rgba(255,255,255,.4);
    box-shadow:-24px 0 70px rgba(0,0,0,.4), inset 1px 0 0 rgba(255,255,255,.25);
    transform: translateX(105%) scale(.94);
    opacity:0;
    transform-origin:right center;
    transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .32s ease;
    z-index:10; overflow-y:auto; overflow-x:hidden;
  }
  .overlay.open .panel{ transform: translateX(0) scale(1); opacity:1; }
  /* drawer-to-drawer switch: quick slide out before the new content slides back in */
  .overlay.open .panel.swap-out{
    transform: translateX(105%) scale(.94); opacity:0;
    transition: transform .22s cubic-bezier(.4,0,.8,.4), opacity .18s ease;
  }
  /* Mobile/tablet: at least ~half the screen. Floor keeps small phones usable. */
  @media (max-width:1024px){
    .panel{
      width: clamp(300px, 55vw, 560px);
    }
  }
  /* Resource drawer gets its own width per spec: clamp(400px, 34vw, 480px) desktop, full viewport on mobile. */
  .panel.panel-resources{
    width: clamp(400px, 34vw, 480px);
  }
  @media (max-width:600px){
    .panel.panel-resources{
      width:100vw;
      border-radius:0;
    }
  }
  .panel-inner{ padding:0 0 40px; position:relative; }
  .panel-header{
    position:relative;
    padding:38px 30px 26px;
    background: linear-gradient(135deg, rgba(var(--panel-color-rgb,181,72,47),.62), rgba(var(--panel-color-2-rgb,138,54,32),.62));
    color:#fff;
    border-radius:28px 0 0 0;
    overflow:hidden;
  }
  .panel-header::before{
    /* soft glass bloom highlight, top-right */
    content:'';
    position:absolute; top:-40%; right:-30%; width:70%; height:140%;
    background:radial-gradient(circle, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 65%);
    pointer-events:none;
  }
  .panel-header::after{
    /* soft diagonal glass sheen */
    content:'';
    position:absolute; inset:0;
    background:linear-gradient(120deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 40%);
    pointer-events:none;
  }
  .panel-body{
    padding:26px 30px 10px;
    position:relative;
    background: rgba(251,243,227,.5);
  }
  /* ---- menu posters: full-width 2:1 banner at the top of the drawer, live title over the open left side ---- */
  .panel-header.has-poster{
    padding:0;
    aspect-ratio:2 / 1;
    background:#1d140d;
  }
  .panel-header.has-poster::before,
  .panel-header.has-poster::after{ display:none; }
  .panel-header.has-poster .panel-poster,
  .panel-header.has-poster .panel-poster img{
    position:absolute; inset:0; width:100%; height:100%; display:block;
  }
  .panel-header.has-poster .panel-poster img{
    object-fit:cover;
    object-position:right center; /* subjects sit on the right; the left side is open for the title */
  }
  .panel-header.has-poster .panel-title-wrap{
    position:absolute; left:0; right:0; bottom:0; top:0;
    display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start;
    padding:26px 30px;
    background:
      linear-gradient(90deg, rgba(20,12,6,.62) 0%, rgba(20,12,6,.38) 38%, rgba(20,12,6,0) 62%),
      linear-gradient(0deg, rgba(20,12,6,.55) 0%, rgba(20,12,6,0) 45%);
  }
  .panel-header.has-poster .panel-title-wrap h2{ max-width:60%; text-shadow:0 2px 12px rgba(0,0,0,.55); }
  .panel-header.has-poster .eyebrow{ background:rgba(20,12,6,.42); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  @media (max-width:600px){
    .panel-header.has-poster .panel-title-wrap{ padding:16px 18px; }
    .panel-header.has-poster .panel-title-wrap h2{ font-size:22px; max-width:70%; }
    .panel-header.has-poster .eyebrow{ font-size:11px; padding:4px 10px; margin-bottom:6px; }
  }
  .panel .close{
    position:absolute; top:18px; right:18px;
    width:38px; height:38px; border-radius:50%; border:none;
    background: rgba(255,255,255,.32);
    font-size:18px; cursor:pointer; color:#fff;
    display:flex; align-items:center; justify-content:center;
  }
  .panel .eyebrow{
    display:inline-block; font-family:'Baloo 2', sans-serif; font-size:13px; font-weight:700;
    background: rgba(255,255,255,.28); color:#fff; padding:5px 14px; border-radius:999px;
    letter-spacing:.02em; margin-bottom:10px;
  }
  .panel h2{ font-family:'Fraunces', serif; font-size:32px; margin:0; line-height:1.1; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.25);}
  .panel p{ font-size:15px; line-height:1.6; color:#3a2c1e; margin:0 0 14px;}
  .panel .cast{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:10px;}
  .cast-card{
    background:#fff; border-radius:14px; padding:14px; cursor:pointer;
    border-top:5px solid var(--card-color, var(--gold));
    box-shadow: 0 3px 10px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .cast-card:hover{ transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.14);}
  .cast-card .name{ font-family:'Baloo 2', sans-serif; font-weight:700; font-size:16px; margin-bottom:3px; color:var(--card-color, #3a2611);}
  .cast-card .desc{ font-size:12.5px; color:#6b5744; line-height:1.4;}
  .game-card{
    background:#fff; border-radius:14px; padding:16px; margin-bottom:12px;
    box-shadow: 0 3px 10px rgba(0,0,0,.08); display:flex; gap:14px; align-items:flex-start;
    border-left:5px solid var(--card-color, var(--gold));
  }
  .game-card .emoji{
    font-size:24px; background: var(--card-tint, #f3ddc9); width:46px; height:46px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .game-card h3{ font-family:'Baloo 2', sans-serif; font-weight:700; margin:0 0 4px; font-size:17px; color:#3a2611;}
  .game-card p{ margin:0; font-size:13px;}

  /* ---- Play panel: poster-style game cards + bouncing balls background ---- */
  .balls-canvas{
    position:absolute; inset:0;
    width:100%; height:100%;
    z-index:0;
    pointer-events:none;
  }
  .play-content{ position:relative; z-index:1; }
  .play-subtitle{
    font-size:15px; color:#5a4735; line-height:1.5; margin:0 0 20px;
  }
  .poster-card{
    position:relative;
    width:100%;
    aspect-ratio:1/1;
    border-radius:20px;
    background-size:cover;
    background-position:center;
    overflow:hidden;
    cursor:pointer;
    margin-bottom:20px;
    box-shadow:0 10px 28px rgba(0,0,0,.28);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .poster-card:hover{ transform:translateY(-4px) scale(1.015); box-shadow:0 16px 36px rgba(0,0,0,.35); }
  .poster-card.disabled{ cursor:default; filter:grayscale(.4) brightness(.92); }
  .poster-card.disabled:hover{ transform:none; box-shadow:0 10px 28px rgba(0,0,0,.28); }
  .poster-desc{
    position:absolute; left:0; right:0; bottom:0;
    padding:18px 18px 16px;
    background:linear-gradient(to top, rgba(10,6,3,.82), rgba(10,6,3,0));
    color:#fff8ec;
    font-family:'Karla',sans-serif;
    font-size:14px; line-height:1.45;
  }
  .poster-hover{
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(20,14,8,0);
    opacity:0;
    transition:opacity .22s ease, background .22s ease;
    pointer-events:none;
  }
  .poster-card:hover .poster-hover{
    opacity:1;
    background:rgba(20,14,8,.42);
  }
  .poster-hover span{
    font-family:'Fraunces', serif;
    font-weight:800;
    font-size:36px;
    color:#fff;
    text-shadow:0 3px 12px rgba(0,0,0,.55);
    letter-spacing:.02em;
  }
  .poster-card.disabled .poster-hover span{ font-size:24px; }
  .cta{
    display:inline-block; margin-top:6px; background: var(--panel-color, #b5482f); color:#fff;
    padding:12px 22px; border-radius:14px; text-decoration:none; font-family:'Baloo 2', sans-serif; font-weight:700; font-size:15px;
    border:none; cursor:pointer;
  }
  .cta.secondary{ background:transparent; color:var(--panel-color, #b5482f); border:2px solid var(--panel-color, #b5482f); }

  /* ---- Family Resources drawer: clickable PDF cards ---- */
  .resource-note{
    font-size:12.5px; color:#8a7860; margin:-6px 0 18px;
  }
  .resource-card{
    display:block; width:100%; height:auto;
    border-radius:14px; overflow:hidden;
    line-height:0; /* kill the inline-image baseline gap */
    box-shadow:0 3px 10px rgba(67,54,42,.18);
    transition:transform .15s ease, box-shadow .15s ease;
    margin-bottom:15px;
  }
  .resource-card:last-of-type{ margin-bottom:0; }
  .resource-card img{ display:block; width:100%; height:auto; }
  .resource-card:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(67,54,42,.26);
  }
  .resource-card:focus-visible{
    outline:3px solid var(--gold);
    outline-offset:3px;
  }
  .resource-bundle{
    margin-top:24px; padding-top:18px;
    border-top:1px solid rgba(67,54,42,.16);
  }
  .resource-bundle p{ margin:0 0 4px; font-size:14px; color:#43362a; }
  .resource-bundle p.resource-note{ margin:0 0 14px; }
  .verse{ font-style:italic; border-left:3px solid var(--gold); padding-left:14px; color:#5a4632; margin:16px 0;}

  @media (max-width: 680px){
    .title-card{ top:16px; left:16px; gap:6px; }
    .title-wordmark-wrap{ width:200px; padding:14px 10px 6px; }
    .author-tag{ font-size:15px; margin-bottom:3px; }
    .book-thumb{ width:135px; margin-left:36px; }
    .hint{ display:none; }
    .dock{ gap:6px; padding:11px 14px 9px; bottom:14px; max-width:94vw; overflow-x:auto; }
    .dock-icon-wrap{ width:54px; height:54px; font-size:32px; }
    .dock-label{ width:60px; font-size:12px; }
    .omar-char{ width:90px; bottom:12%; left:57%; }
  }

/* ---- distant birds crossing the sky ---- */
.birds{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:1; }
.bird-path{ position:absolute; left:0; top:0; will-change:transform; animation:bird-cross linear infinite; }
.bird{
  display:block; width:14px; height:8px; opacity:.55;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'><path d='M1 9 Q7 1 14 9 Q21 1 27 9' fill='none' stroke='%231c2233' stroke-width='2.2' stroke-linecap='round'/></svg>") center/contain no-repeat;
  animation:bird-flap ease-in-out infinite alternate, bird-bob ease-in-out infinite;
}
.p1{ top:31%; animation-duration:46s; animation-delay:-12s; }
.p2{ top:36%; animation-duration:58s; animation-delay:-30s; animation-direction:reverse; }
.p3{ top:28%; animation-duration:52s; animation-delay:-41s; }
.p4{ top:40%; animation-duration:66s; animation-delay:-8s;  animation-direction:reverse; }
.p1 .bird{ animation-duration:.42s, 5.2s; }
.p2 .bird{ animation-duration:.5s, 6.1s; transform-origin:center; width:11px; height:6px; opacity:.45; }
.p2 .bird, .p4 .bird{ scale:-1 1; }
.p3 .bird{ animation-duration:.38s, 4.4s; width:16px; height:9px; }
.p4 .bird{ animation-duration:.55s, 7s; width:10px; height:6px; opacity:.4; }
@keyframes bird-cross{ from{ transform:translateX(-6vw); } to{ transform:translateX(106vw); } }
@keyframes bird-flap{ from{ transform:scaleY(1); } to{ transform:scaleY(.35); } }
@keyframes bird-bob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -14px; } }
.stage.dusk .bird{ opacity:.35; filter:brightness(.3); }
@media (prefers-reduced-motion: reduce){ .birds{ display:none; } }