/* The Wishing Bowl: consolidated styles. Original cascade order preserved. */

  :root{
    --forest-deep:#163a29;
    --forest-mid:#123326;
    --forest-line:#1f4a36;
    --gold:#f2b93b;
    --gold-light:#ffd873;
    --gold-dark:#c9891a;
    --purple:#9b6bd6;
    --purple-deep:#6b3fa0;
    --cream:#f7efdc;
    --cream-2:#fbf6ea;
    --ink:#1c2b22;
    --ink-soft:#3a4d40;
    --teal:#1c7d70;
    --pink:#c23c78;
    --orange:#dd9a2b;
    --brown:#7a4a2b;
    --gray:#7d8790;
    --white:#ffffff;
    --shadow:0 18px 40px rgba(0,0,0,.35);
  }

  *{box-sizing:border-box;}

  html{scroll-behavior:smooth;}

  body{
    margin:0;
    font-family:'Quicksand', sans-serif;
    background:var(--forest-deep);
    color:var(--white);
    overflow-x:hidden;
  }

  h1,h2,h3,.display{
    font-family:'Baloo 2', cursive;
    margin:0;
    line-height:1.08;
  }

  p{margin:0;}

  a{color:inherit; text-decoration:none;}

  img{max-width:100%; display:block;}

  .wrap{
    max-width:1240px;
    margin:0 auto;
    padding:0 32px;
  }

  .script{font-family:'Caveat', cursive;}


  /* ---------- decorative starfield ---------- */
  .stars{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0;}

  .stars span{
    position:absolute;
    width:4px; height:4px;
    background:var(--gold-light);
    border-radius:50%;
    box-shadow:0 0 8px 2px rgba(255,216,115,.9);
    animation:twinkle 3.5s ease-in-out infinite;
  }

  @keyframes twinkle{
    0%,100%{opacity:.25; transform:scale(.8);}
    50%{opacity:1; transform:scale(1.3);}
  }


  /* ---------- buttons ---------- */
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:14px 26px;
    border-radius:999px;
    font-family:'Baloo 2', cursive;
    font-weight:600;
    font-size:16px;
    cursor:pointer;
    border:2px solid transparent;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
    white-space:nowrap;
  }

  .btn:hover{transform:translateY(-2px);}

  .btn-gold{
    background:linear-gradient(180deg,var(--gold-light),var(--gold));
    color:#3a2405;
    box-shadow:0 10px 24px rgba(242,185,59,.35);
  }

  .btn-gold:hover{box-shadow:0 14px 30px rgba(242,185,59,.5);}

  .btn-outline{
    background:transparent;
    border-color:rgba(255,255,255,.6);
    color:var(--white);
  }

  .btn-outline:hover{background:rgba(255,255,255,.08); border-color:var(--white);}

  .btn-forest{
    background:var(--forest-mid);
    border-color:var(--forest-line);
    color:var(--cream);
  }

  .btn-forest:hover{background:var(--forest-line);}


  /* ---------- header ---------- */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(8,20,15,.88);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(242,185,59,.15);
  }

  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 32px;
    max-width:1240px; margin:0 auto;
  }

  .logo{display:flex; align-items:center; gap:10px;}

  .logo-mark{
    font-family:'Baloo 2',cursive; font-weight:700; font-size:22px;
    background:linear-gradient(180deg,var(--gold-light),var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .logo-text{line-height:1.15; min-width:0;}

  .logo-title{font-family:'Baloo 2',cursive; font-weight:700; font-size:22px; white-space:nowrap;
    background:linear-gradient(180deg,var(--gold-light),var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;}

  .logo-sub{font-size:10.5px; letter-spacing:.02em; color:var(--cream); opacity:.75;}

  nav.links{display:flex; align-items:center; gap:30px;}

  nav.links a{
    font-weight:600; font-size:14.5px; color:var(--cream); opacity:.9;
    position:relative; padding:4px 0;
  }

  nav.links a.active, nav.links a:hover{opacity:1; color:var(--gold-light);}

  .nav-right{display:flex; align-items:center; gap:18px;}

  .menu-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}

  .menu-toggle span{width:24px; height:2.5px; background:var(--cream); border-radius:2px;}

  @media (max-width:480px){.nav-cta{display:none;}}


  /* ---------- hero ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:110px 0 60px;
    background:
      linear-gradient(180deg, rgba(10,20,10,.22), transparent 22%),
      none center 40%/cover no-repeat;
    overflow:hidden;
  }

  .hero .wrap{width:100%;}

  .hero .stars, .newsletter .stars{display:none;}

  .hero-frame-top{
    position:absolute; top:0; left:0; right:0; z-index:3;
    height:150px;
    background:none center top/cover no-repeat;
    -webkit-mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
    mask-image:linear-gradient(to bottom, black 55%, transparent 100%);
    pointer-events:none;
  }

  @media (max-width:980px){
    .hero{background-image:
      linear-gradient(180deg, rgba(10,20,10,.22), transparent 22%),
      none;
    }}

  @media (max-width:700px){
    .hero{padding-bottom:70px; padding-top:90px;
      background-image:
        linear-gradient(180deg, rgba(10,20,10,.22), transparent 22%),
        none;
    }

    .hero-frame-top{height:90px;}}

  .hero .wrap{
    position:relative; z-index:2;
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:50px;
    align-items:center;
  }

  .hero-copy{
    background:rgba(8,16,12,.48);
    border-radius:24px;
    padding:36px 40px;
  }

  @media (max-width:980px){.hero-copy{padding:30px 26px;}}

  .hero-eyebrow{
    display:inline-block;
    font-weight:700; font-size:13px; letter-spacing:.08em;
    color:var(--gold-light); text-transform:uppercase;
    background:rgba(242,185,59,.1);
    border:1px solid rgba(242,185,59,.3);
    padding:6px 14px; border-radius:999px;
    margin-bottom:18px;
  }

  .hero h1{font-size:52px; font-weight:800;}

  .hero .line1{color:var(--cream); display:block;}

  .hero .line2{
    display:block;
    background:linear-gradient(180deg,var(--gold-light),var(--gold));
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }

  .hero-sub{
    font-family:'Baloo 2',cursive; font-weight:600; font-size:22px;
    color:var(--cream); margin-top:14px;
  }

  .hero-desc{
    margin-top:16px; font-size:16.5px; line-height:1.65; color:#d7e3da;
    max-width:480px;
  }

  .hero-actions{display:flex; gap:16px; margin-top:30px; flex-wrap:wrap;}

  .hero-tag{
    margin-top:34px; display:flex; align-items:center; gap:10px;
    font-family:'Caveat',cursive; font-size:26px; color:var(--cream);
  }

  .hero-art{position:relative; display:flex; flex-direction:column; align-items:center;}

  .book-frame{
    position:relative;
    max-width:300px; margin:0 auto;
  }

  .book-frame img{
    display:block; width:100%; height:auto;
    border-radius:16px 6px 6px 16px;
    transform:rotate(2deg);
    filter:drop-shadow(0 30px 40px rgba(0,0,0,.5));
  }

  .book-frame::before{
    content:"";
    position:absolute; top:3%; bottom:5%; right:-3%; width:7%;
    background:linear-gradient(90deg,#1e3a5c,#0b1a2b);
    border-radius:0 6px 6px 0;
    transform:rotate(2deg);
    z-index:-1;
    box-shadow:3px 2px 10px rgba(0,0,0,.35);
  }

  .book-pedestal{
    position:absolute; left:50%; bottom:-58%;
    width:190%; aspect-ratio:1306/1164;
    transform:translateX(-50%);
    background:url('assets/hero-book-stone-pedestal.webp') center/contain no-repeat;
    z-index:-2; pointer-events:none;
  }

  .hero-quote{
    position:relative; z-index:2;
    margin-top:26px; max-width:280px;
    text-align:center; transform:rotate(-2deg);
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Caveat',cursive; font-size:21px; color:var(--cream);
    line-height:1.25;
    padding:10px 20px;
    background:rgba(8,18,14,.55);
    border-radius:999px;
    box-shadow:0 6px 16px rgba(0,0,0,.3);
    text-shadow:0 2px 6px rgba(0,0,0,.6);
  }

  .hero-quote .quote-star{font-size:16px; flex:none;}


  /* ---------- ornamental butterflies ---------- */

  /* persistent side vines framing every section, full height */
  .seam-vine{
    position:absolute; top:0; bottom:0; width:80px;
    background-repeat:repeat-y; background-size:80px auto;
    z-index:6; pointer-events:none; opacity:.5;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.3));
  }

  .seam-vine.left{left:0; background-image:url('assets/decorative-vine-border-left.webp');}

  .seam-vine.right{right:0; background-image:url('assets/decorative-vine-border-right.webp');}

  @media (max-width:980px){.seam-vine{width:56px; background-size:56px auto;}}

  @media (max-width:640px){.seam-vine{display:none;}}


  /* flourish marking a section seam */
  .seam-flourish{
    position:absolute; left:50%; bottom:0;
    transform:translate(-50%, 50%);
    width:220px; z-index:6; pointer-events:none;
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
  }

  @media (max-width:700px){.seam-flourish{width:140px;}}


  .butterfly{
    position:absolute; z-index:4; pointer-events:auto;
    filter:drop-shadow(0 6px 10px rgba(0,0,0,.35));
    animation:flutter 6s ease-in-out infinite;
    transition:transform .3s ease, filter .3s ease;
    cursor:pointer;
  }

  .butterfly:hover{transform:scale(1.18) rotate(-6deg); filter:drop-shadow(0 8px 14px rgba(0,0,0,.4)) brightness(1.12);}

  @keyframes flutter{
    0%,100%{transform:translateY(0) rotate(0deg);}
    25%{transform:translateY(-10px) rotate(-4deg);}
    50%{transform:translateY(2px) rotate(2deg);}
    75%{transform:translateY(-6px) rotate(-2deg);}
  }

  @media (max-width:700px){
    .butterfly{transform:scale(.8);}

    .hero .butterfly{top:14px !important; left:auto !important; bottom:auto !important;}

    .hero .butterfly:first-of-type{right:16%;}

    .hero .butterfly.butterfly-float-low{right:62%;}}


  /* ---------- scroll reveal ---------- */
  /* Content stays readable even when JavaScript never runs. */
  .reveal{opacity:1; transform:none;}

  .reveal.reveal-animate{animation:contentReveal .7s ease;}

  @keyframes contentReveal{
    from{opacity:0; transform:translateY(28px);}
    to{opacity:1; transform:none;}
  }

  @media(prefers-reduced-motion:reduce){
    .reveal.reveal-animate{animation:none !important;}}

  html.a11y-reduce-motion .reveal.reveal-animate{animation:none !important;}


  /* ---------- section shells ---------- */
  section{position:relative;}

  .parchment-fill{
    background:
      radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.55), transparent 65%),
      radial-gradient(ellipse at 50% 50%, var(--cream-2) 0%, var(--cream) 55%, #e8d6a8 100%);
  }

  .section-tag{
    text-align:center; font-weight:700; font-size:14px; letter-spacing:.08em;
    text-transform:uppercase; color:var(--purple); margin-bottom:8px;
  }



  /* ---------- story section ---------- */
  .story-section{padding:70px 24px 90px; background:var(--cream-2);}

  .story-grid{
    max-width:1100px; margin:0 auto;
    display:grid; grid-template-columns:1fr 1.15fr;
    gap:50px; align-items:center;
  }

  .story-copy .kicker{
    color:var(--purple-deep); font-weight:700; font-size:14px; margin-bottom:8px;
  }

  .story-copy h2{font-size:32px; color:var(--teal); margin-bottom:14px; line-height:1.1;}

  .story-copy p{color:var(--ink-soft); font-size:15.5px; line-height:1.65; margin-bottom:24px;}

  .story-photo{
    border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
  }

  .story-photo img{display:block; width:100%; height:auto;}

  @media (max-width:860px){
    .story-grid{grid-template-columns:1fr; text-align:center;}

    .story-photo{order:-1; max-width:520px; margin:0 auto;}}


  /* ---------- characters ---------- */
  .characters{
    padding:90px 0;
    background-color:var(--forest-deep);
    background-repeat:no-repeat; background-position:center; background-size:cover;
    background-image:
      radial-gradient(ellipse 800px 400px at 15% 10%, rgba(155,107,214,.12), transparent 60%),
      radial-gradient(ellipse 800px 400px at 85% 90%, rgba(242,185,59,.1), transparent 60%),
      linear-gradient(180deg, var(--forest-deep) 0%, rgba(11,26,20,.48) 10%, rgba(11,26,20,.48) 90%, var(--forest-deep) 100%);
  }

  .characters.bg-loaded{
    background-image:
      radial-gradient(ellipse 800px 400px at 15% 10%, rgba(155,107,214,.12), transparent 60%),
      radial-gradient(ellipse 800px 400px at 85% 90%, rgba(242,185,59,.1), transparent 60%),
      linear-gradient(180deg, var(--forest-deep) 0%, rgba(11,26,20,.48) 10%, rgba(11,26,20,.48) 90%, var(--forest-deep) 100%),
      none;
  }

  .characters h2{
    text-align:center; font-size:38px; margin-top:4px;
  }

  .characters h2 .star-flank{color:var(--gold-light); font-size:.7em; vertical-align:middle;}

  .characters .sub{
    text-align:center; color:#c9dccd; margin-top:10px; font-size:16px;
  }

  .char-grid{
    margin-top:52px;
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:22px;
  }

  .char-card{
    text-align:center; border-radius:20px; padding:18px 14px 22px;
    box-shadow:0 12px 26px rgba(0,0,0,.28);
    transition:transform .25s ease, box-shadow .25s ease;
  }

  .char-card:hover{transform:translateY(-8px); box-shadow:0 18px 34px rgba(0,0,0,.38);}

  .c-frankie{background:#dff5ef;}

  .c-sophie{background:#fbe3ee;}

  .c-mom{background:#ece3fa;}

  .c-trina{background:#fbead0;}

  .c-rock{background:#f1e6da;}

  .c-leni{background:#e9edf1;}

  .char-portrait{
    position:relative;
    border-radius:20px;
    height:190px;
    display:flex; align-items:flex-end; justify-content:center;
    overflow:hidden;
    margin-bottom:14px;
  }

  .char-portrait img{
    max-height:190px; max-width:100%; width:auto; height:auto; object-fit:contain; margin:0 auto;
    filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));
  }

  .char-name{
    display:inline-block;
    font-family:'Baloo 2',cursive; font-weight:700; font-size:16px;
    padding:6px 22px; border-radius:999px; color:#fff;
    margin-bottom:10px;
  }

  .n-frankie{background:var(--teal);}

  .n-sophie{background:var(--pink);}

  .n-mom{background:var(--purple-deep);}

  .n-trina{background:var(--orange); color:#3a2405;}

  .n-rock{background:var(--brown);}

  .n-leni{background:var(--gray);}

  .char-desc{font-size:13.5px; color:var(--ink-soft); line-height:1.55; min-height:60px; padding:0 4px;}

  .char-belief{
    margin-top:10px; font-size:13px; font-weight:700;
  }

  .b-frankie{color:var(--teal);}

  .b-sophie{color:var(--pink);}

  .b-mom{color:var(--purple-deep);}

  .b-trina{color:#b4720f;}

  .b-rock{color:var(--brown);}

  .b-leni{color:#5b6570;}


  @media (max-width:1080px){.char-grid{grid-template-columns:repeat(2,1fr); row-gap:40px;}}


  /* ---------- videos ---------- */
  .videos-section{
    padding:70px 24px 90px;
    color:var(--ink);
    background:
      radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.55), transparent 65%),
      radial-gradient(ellipse at 50% 50%, var(--cream-2) 0%, var(--cream) 55%, #e8d6a8 100%);
    overflow:hidden;
  }

  .videos-head{
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px;
    padding:48px 48px 0;
  }

  .videos-head h2{font-size:32px; color:var(--purple-deep);}

  .videos-head .sub{color:var(--ink-soft); font-size:15px; max-width:480px; margin-top:6px;}

  .video-carousel{position:relative; padding:36px 48px 0;}

  .videos-cta{text-align:center; padding:28px 48px 52px;}

  .video-grid{
    display:flex; align-items:flex-start; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
    scroll-behavior:smooth; padding-bottom:8px;
    -ms-overflow-style:none; scrollbar-width:none;
  }

  .video-grid::-webkit-scrollbar{display:none;}

  .video-card{
    flex:0 0 calc((100% - 44px)/3); scroll-snap-align:start;
    border-radius:16px; overflow:hidden; box-shadow:0 14px 28px rgba(0,0,0,.18); background:#000;
    transition:transform .25s ease, box-shadow .25s ease;
    cursor:pointer;
  }

  .video-card:hover{transform:translateY(-6px); box-shadow:0 20px 36px rgba(0,0,0,.28);}

  .video-thumb{position:relative; aspect-ratio:16/10; overflow:hidden;}

  .video-thumb img{width:100%; height:100%; object-fit:cover;}

  .play-btn{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  }

  .play-btn span{
    width:54px; height:54px; border-radius:50%;
    background:rgba(255,255,255,.92);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 8px 18px rgba(0,0,0,.35);
    transition:transform .18s ease;
  }

  .video-card:hover .play-btn span{transform:scale(1.08);}

  .video-title{
    background:var(--cream-2); color:var(--ink); font-family:'Baloo 2',cursive;
    font-weight:600; font-size:15px; padding:12px 14px;
  }

  .carousel-arrow{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
    background:rgba(255,255,255,.95); color:var(--ink);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; box-shadow:0 8px 18px rgba(0,0,0,.25); z-index:3;
    transition:transform .18s ease, background .18s ease;
  }

  .carousel-arrow:hover{transform:translateY(-50%) scale(1.08); background:var(--gold-light);}

  .carousel-arrow.prev{left:8px;}

  .carousel-arrow.next{right:8px;}

  @media (max-width:900px){
    .videos-head{padding:40px 28px 0;}

    .video-carousel{padding:30px 44px 0;}

    .videos-cta{padding:24px 44px 44px;}

    .video-card{flex:0 0 calc((100% - 22px)/2);}}

  @media (max-width:560px){
    .carousel-arrow{width:36px; height:36px; font-size:15px;}

    .video-card{flex:0 0 85%;}}


  /* ---------- video modal ---------- */
  .video-modal{
    display:none; position:fixed; inset:0; z-index:1000;
    background:rgba(5,12,9,.88); align-items:center; justify-content:center; padding:24px;
  }

  .video-modal.open{display:flex;}

  .video-modal-inner{
    position:relative; width:100%; max-width:900px;
    aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden;
    box-shadow:0 30px 60px rgba(0,0,0,.5);
  }

  .video-modal-inner iframe{width:100%; height:100%; border:0;}

  .video-modal-close{
    position:absolute; top:-46px; right:0;
    background:none; border:none; color:#fff; font-size:32px; line-height:1;
    cursor:pointer; opacity:.85;
  }

  .video-modal-close:hover{opacity:1;}

  .video-modal-fallback{
    position:absolute; top:-46px; left:0;
    color:#cfe0d5; font-size:14px; font-weight:600;
    opacity:.85;
  }

  .video-modal-fallback:hover{opacity:1; color:var(--gold-light);}


  /* ---------- about ---------- */
  .about-section{
    padding:70px 24px 90px;
    background-color:var(--forest-deep);
    background-repeat:no-repeat; background-position:center; background-size:cover;
    background-image:
      linear-gradient(180deg, var(--forest-deep) 0%, rgba(8,18,14,.28) 10%, rgba(8,18,14,.42) 90%, var(--forest-deep) 100%);
  }

  .about-section.bg-loaded{
    background-image:
      linear-gradient(180deg, var(--forest-deep) 0%, rgba(8,18,14,.28) 10%, rgba(8,18,14,.42) 90%, var(--forest-deep) 100%),
      none;
  }

  .about-card{
    position:relative;
    max-width:1140px; margin:0 auto;
    border-radius:20px; overflow:hidden; box-shadow:var(--shadow);
    background:url('assets/about-author-library-scene.webp') center/cover no-repeat;
    aspect-ratio:1140/510;
  }

  .about-copy{
    position:absolute; left:27%; top:6%; width:38%; height:88%;
    display:flex; flex-direction:column; justify-content:center;
    background:radial-gradient(ellipse at 50% 50%, rgba(251,246,234,.88), rgba(251,246,234,.6) 75%, transparent 100%);
    border-radius:14px;
    padding:1.2em 1.6em;
  }

  .about-copy h2{font-size:clamp(16px,3vw,30px); color:var(--forest-mid); margin-bottom:.5em; line-height:1.1;}

  .about-copy p{color:var(--ink-soft); font-size:clamp(10px,2.1vw,15.5px); line-height:1.5;}

  .about-side{
    position:absolute; left:65%; top:18%; width:17%;
    font-family:'Caveat',cursive; color:var(--ink-soft);
    font-size:clamp(9px,1.9vw,19px);
    background:#fffdf8;
    border-radius:3px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.4em;
    padding:1.4em 1em 1.1em;
    text-align:center; line-height:1.3;
    transform:rotate(-4deg);
    box-shadow:0 8px 18px rgba(0,0,0,.3), 0 0 0 1px rgba(0,0,0,.06);
  }

  .about-side::before{
    content:"";
    position:absolute; top:-.7em; left:50%;
    width:3em; height:1.3em;
    background:rgba(155,107,214,.6);
    border-radius:1px;
    transform:translateX(-50%) rotate(-3deg);
    box-shadow:0 3px 5px rgba(0,0,0,.25);
  }

  .about-side .note-icons{font-size:.85em;}

  .about-side .note-heart{color:var(--purple); font-size:.8em;}

  @media (max-width:560px){
    .about-card{
      aspect-ratio:auto; background:
        radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.6), transparent 65%),
        radial-gradient(ellipse at 50% 55%, var(--cream-2) 0%, var(--cream) 60%, #e8d6a8 100%);
      padding:40px 28px; display:flex; flex-direction:column; align-items:center; gap:28px;
    }

    .about-copy{position:static; width:100%; height:auto; text-align:center; background:none; padding:0;}

    .about-copy h2{font-size:26px;}

    .about-copy p{font-size:15.5px;}

    .about-side{position:static; width:200px; font-size:18px; margin:0 auto;}}


  /* ---------- newsletter ---------- */
  .newsletter{
    position:relative;
    padding:90px 24px 130px;
    text-align:center;
    background-color:var(--forest-deep);
    background-repeat:no-repeat; background-position:center; background-size:cover;
    background-image:
      radial-gradient(ellipse 560px 380px at 50% 30%, rgba(255,255,255,.55), transparent 65%),
      linear-gradient(180deg, rgba(8,18,14,.12) 0%, transparent 30%, rgba(8,18,14,.35) 100%);
  }

  .newsletter.bg-loaded{
    background-image:
      radial-gradient(ellipse 560px 380px at 50% 30%, rgba(255,255,255,.55), transparent 65%),
      linear-gradient(180deg, rgba(8,18,14,.12) 0%, transparent 30%, rgba(8,18,14,.35) 100%),
      none;
  }

  .newsletter .icon{margin:0 auto 14px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));}

  .newsletter h2{font-size:34px; color:var(--forest-mid);}

  .newsletter p{margin-top:12px; color:var(--ink-soft); font-size:15.5px; max-width:520px; margin-left:auto; margin-right:auto;}

  .newsletter-note{
    margin-top:22px; color:var(--ink); font-size:14.5px;
    display:inline-block; padding:8px 18px; border-radius:999px;
    background:rgba(255,255,255,.72); box-shadow:0 2px 8px rgba(0,0,0,.12);
  }


  /* ---------- footer ---------- */
  footer{
    position:relative;
    background-color:var(--forest-deep);
    background-repeat:no-repeat; background-position:center; background-size:cover;
    background-image:
      linear-gradient(180deg, rgba(8,18,14,.1) 0%, rgba(6,14,11,.55) 55%, var(--forest-deep) 100%);
    padding:44px 24px 26px; text-align:center;
  }

  footer.bg-loaded{
    background-image:
      linear-gradient(180deg, rgba(8,18,14,.1) 0%, rgba(6,14,11,.55) 55%, var(--forest-deep) 100%),
      none;
  }

  .footer-top{text-align:center; margin-bottom:20px;}

  .footer-logo{margin-bottom:0;}

  .footer-links{
    display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:22px;
    font-size:14px; color:#cfe0d5; margin-bottom:26px;
  }

  .footer-links a:hover{color:var(--gold-light);}

  .footer-links a.active{color:var(--gold-light);}

  .social{display:flex; justify-content:center; gap:14px; margin-bottom:22px;}

  .social a{
    width:38px; height:38px; border-radius:50%; background:var(--forest-mid);
    display:flex; align-items:center; justify-content:center; color:#fff;
    transition:background .18s ease;
  }

  .social a:hover{background:var(--gold-dark);}

  .footer-tag{
    font-family:'Baloo 2',cursive; font-weight:600; color:var(--gold-light);
    font-size:14.5px; margin-bottom:18px; letter-spacing:.02em;
  }

  .copyright{font-size:13px; color:#8fa398;}

  .legal-links{font-size:12px; color:#8fa398; margin-top:8px;}

  .legal-links a{opacity:.85;}

  .legal-links a:hover{opacity:1; color:var(--gold-light);}


  /* ---------- responsive ---------- */
  @media (max-width:980px){
    nav.links{display:none;}

    .menu-toggle{display:flex;}

    .hero .wrap{grid-template-columns:1fr; text-align:center;}

    .hero-desc{margin-left:auto; margin-right:auto;}

    .hero-actions{justify-content:center;}

    .hero-tag{justify-content:center;}

    .book-frame{max-width:300px;}}

  @media (max-width:560px){
    .wrap{padding:0 20px;}

    .hero h1{font-size:38px;}

    .videos-head{padding:34px 22px 0;}

    .video-grid{padding:26px 22px 8px;}

    .videos-cta{padding:16px 22px 40px;}

    .footer-links{flex-direction:column; gap:12px;}

    .nav{padding:12px 16px;}

    .logo{gap:7px;}

    .logo-title{font-size:16.5px;}

    .logo-sub{font-size:8.5px;}}


  /* ---------- pixie dust cursor trail ---------- */
  .pixie-layer{position:fixed; inset:0; pointer-events:none; z-index:500; overflow:hidden;}

  .pixie{
    position:absolute; top:0; left:0; border-radius:50%;
    background:radial-gradient(circle, #fff8df 0%, var(--gold-light) 45%, transparent 75%);
    box-shadow:0 0 6px 1px rgba(255,216,115,.7);
    opacity:0;
    animation:pixieLife 1.1s ease-out forwards;
  }

  @keyframes pixieLife{
    0%{opacity:.85; transform:translate(-50%,-50%) scale(1);}
    100%{opacity:0; transform:translate(-50%,-50%) translateY(-26px) scale(.3);}
  }

  @media (hover:none), (max-width:700px){.pixie-layer{display:none;}}


  /* ---------- scroll-to-top button ---------- */
  .scroll-top-btn{
    position:fixed; right:22px; bottom:22px; z-index:600;
    width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
    background:linear-gradient(180deg,var(--gold-light),var(--gold));
    color:#3a2405; font-size:20px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,.35);
    opacity:0; visibility:hidden; transform:translateY(12px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s;
  }

  .scroll-top-btn.visible{opacity:1; visibility:visible; transform:translateY(0);}

  .scroll-top-btn:hover{transform:translateY(-3px);}


  /* ---------- accessibility widget ---------- */
  .a11y-btn{
    position:fixed; left:22px; bottom:22px; z-index:600;
    width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
    background:var(--forest-mid); border:2px solid var(--gold);
    color:var(--gold-light); font-size:21px;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px rgba(0,0,0,.35);
    transition:transform .18s ease;
  }

  .a11y-btn:hover{transform:translateY(-3px);}

  .a11y-panel{
    position:fixed; left:22px; bottom:78px; z-index:601;
    width:240px; max-width:calc(100vw - 44px);
    background:var(--cream-2); color:var(--ink);
    border-radius:16px; box-shadow:0 20px 44px rgba(0,0,0,.4);
    padding:18px; display:none; flex-direction:column; gap:10px;
  }

  .a11y-panel.open{display:flex;}

  .a11y-panel h3{font-size:15px; font-family:'Baloo 2',cursive; color:var(--forest-mid); margin-bottom:2px;}

  .a11y-row{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13.5px;}

  .a11y-row button{
    font-family:'Quicksand',sans-serif; font-weight:600; font-size:13px;
    padding:6px 10px; border-radius:8px; border:1.5px solid var(--forest-mid);
    background:#fff; color:var(--forest-mid); cursor:pointer;
  }

  .a11y-row button.active{background:var(--forest-mid); color:#fff;}

  .a11y-reset{
    margin-top:4px; font-size:12.5px; text-align:center; text-decoration:underline;
    background:none; border:none; color:var(--ink-soft); cursor:pointer; padding:4px;
  }


  /* ---------- accessibility states ---------- */
  html.a11y-large-text body{zoom:1.18;}

  html.a11y-underline-links a{text-decoration:underline !important;}

  html.a11y-high-contrast body{background:#000;}

  html.a11y-high-contrast body::before{
    content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
    background:rgba(0,0,0,.55);
  }

  html.a11y-high-contrast a{color:#ffe27a !important; text-decoration:underline !important;}

  html.a11y-high-contrast img{filter:contrast(1.2) saturate(1.1);}

  html.a11y-high-contrast .btn{outline:2px solid #fff;}

  html.a11y-high-contrast *:focus-visible{outline:3px solid #ffe27a !important; outline-offset:2px;}

  html.a11y-reduce-motion *{animation:none !important; transition:none !important; scroll-behavior:auto !important;}

  html.a11y-reduce-motion .pixie-layer{display:none !important;}


.welcome-scene{position:relative;overflow:hidden;isolation:isolate;min-height:365px;background:linear-gradient(120deg,#eaf8d7,#fff9d8 50%,#e2f4fd);display:grid;place-items:center;border-top:6px solid #f4d567;border-bottom:6px solid #f4d567}
.welcome-copy{position:relative;z-index:3;text-align:center;width:36%;padding:25px 0}
.welcome-copy h2{font-family:'Baloo 2',sans-serif;color:#17533a;font-size:36px;line-height:1.15;margin:0 0 14px}
.welcome-copy p{font-size:17px;color:#295d44;line-height:1.6;margin:0 0 20px}

@media(max-width:760px){.welcome-scene{min-height:490px;display:block}
.welcome-copy{width:90%;margin:0 auto;padding-top:27px}
.welcome-copy h2{font-size:30px}
.welcome-copy p{margin-bottom:12px;font-size:16px}}


.hero{background-image:url('assets/sunrise-lake-crisp.webp');background-position:center 44%;background-size:cover}
.hero-frame-top{display:none}
.hero-copy{background:rgba(12,48,44,.79)}
.hero-desc{color:#fff!important;font-weight:500}
.daylight-motion{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.daylight-motion i{position:absolute;left:var(--x);top:var(--y);width:5px;height:5px;border-radius:50%;background:#fff4b5;box-shadow:0 0 10px 3px #ffe99660;animation:driftingLight var(--duration) ease-in-out var(--delay) infinite}
.water-glints{position:absolute;left:17%;right:15%;top:65%;height:22%;opacity:.3;background:radial-gradient(ellipse at 18% 30%,#fffbdc 0 1px,transparent 9px),radial-gradient(ellipse at 73% 60%,#fffbdc 0 1px,transparent 14px),radial-gradient(ellipse at 48% 80%,#fffbdc 0 1px,transparent 10px);background-size:170px 47px,230px 65px,270px 60px;animation:waterGlimmer 8s ease-in-out infinite}
@keyframes driftingLight{0%,100%{opacity:0;transform:translate(0,15px)}30%,65%{opacity:.65}80%{opacity:.1;transform:translate(22px,-35px)}}
@keyframes waterGlimmer{0%,100%{opacity:.12;transform:translateX(-7px) scaleX(.95)}50%{opacity:.45;transform:translateX(7px) scaleX(1.02)}}

.welcome-scene{min-height:400px;background:linear-gradient(90deg,#fff8db55,#fff8dbd9 38%,#fff8dbd9 62%,#fff8db55),none center/cover;border:0}
.welcome-copy{width:38%;padding:30px 12px}
.welcome-copy h2{font-size:36px}
.welcome-copy p{font-weight:600}
.peek{position:absolute;bottom:-38px;width:31%;max-width:420px;height:390px;pointer-events:none;transform:none}
.peek svg{height:100%;width:100%;overflow:visible;display:block}
.peek-sophie{left:-40px;transform:rotate(9deg);transform-origin:0 100%}
.peek-frankie{right:-40px;transform:rotate(-9deg);transform-origin:100% 100%}
.moving-hand{transform-box:view-box}
.sophie-hand{transform-origin:431px 715px}
.frankie-hand{transform-origin:1408px 637px}
.welcome-scene.welcome-active .sophie-hand{animation:gentleWave 8s .9s infinite}
.welcome-scene.welcome-active .frankie-hand{animation:gentleWave 8s 1.3s infinite}
.welcome-scene.welcome-active .peek-sophie{animation:peekLeft 1.4s ease-out both}
.welcome-scene.welcome-active .peek-frankie{animation:peekRight 1.4s .25s ease-out both}
@keyframes gentleWave{0%,6%,46%,100%{transform:rotate(0)}12%,24%,36%{transform:rotate(12deg)}18%,30%,42%{transform:rotate(-12deg)}}
@keyframes peekLeft{from{transform:translateX(-110%) rotate(-12deg)}to{transform:translateX(0) rotate(9deg)}}
@keyframes peekRight{from{transform:translateX(110%) rotate(12deg)}to{transform:translateX(0) rotate(-9deg)}}

.characters,.characters.bg-loaded{background:linear-gradient(#123e3666,#123e3680),url('assets/sunrise-lake-crisp.webp') center 65%/cover}
.characters h2,.characters .section-sub{color:#fff!important;text-shadow:0 2px 6px #092f29}
.characters .section-sub{font-weight:600}
.about-section,.about-section.bg-loaded{background:#e9f0d9;padding:65px 24px}
.about-section>.seam-vine,.about-section>.seam-flourish{display:none}
.about-card{background-image:url('art/reading-world.webp');border-radius:24px;min-height:440px;aspect-ratio:auto;box-shadow:0 15px 35px #24472c20}
.about-copy{left:25%;top:9%;height:82%;width:43%;background:#fffdf5f7;box-shadow:0 8px 25px #153c3020;padding:30px;border-radius:18px}
.about-copy h2{font-size:30px;color:#173e31}
.about-copy p{color:#183f31;font-size:17px;line-height:1.75;font-weight:600}
.about-side{left:auto;right:5%;width:20%;top:23%;font-size:20px;color:#173e31}

.lakeside-ending{background:linear-gradient(180deg,#e6f5e433,#144c4310 55%,#083b36bb),url('assets/sunrise-lake-crisp.webp') center/cover no-repeat;position:relative}
.lakeside-ending .newsletter,.lakeside-ending .newsletter.bg-loaded,.lakeside-ending footer,.lakeside-ending footer.bg-loaded{background:none}
.lakeside-ending .seam-flourish,.lakeside-ending .seam-vine{display:none}
.lakeside-ending .newsletter{padding:70px 24px 35px}
.newsletter>div.reveal{max-width:650px;margin:auto;padding:32px 36px;background:#fffdf5f5;border-radius:24px;box-shadow:0 15px 45px #173e3120}
.newsletter h2{color:#153e30}
.newsletter p{color:#264c3d;font-size:17px;line-height:1.6;font-weight:600}
.newsletter-note{background:none;box-shadow:none;padding:0;display:block}
.signup-form{margin-top:25px;text-align:left}
.signup-form label{color:#173e31;font-size:16px;font-weight:700;display:block;margin-bottom:10px}
.signup-row{display:flex;gap:10px}
.signup-row input{min-width:0;flex:1;border:2px solid #709b86;border-radius:12px;background:#fff;color:#183f31;padding:14px;font:inherit}
.signup-row input:focus-visible{outline:3px solid #daa327;outline-offset:2px}
.signup-row button{border:0;border-radius:12px;background:#e7cf90;color:#49412c;font:700 14px 'Quicksand',sans-serif;padding:12px 18px}
.signup-form #signup-status{font-size:14px;line-height:1.5;font-weight:500;margin-top:10px}
.lakeside-ending footer{padding:30px 24px 40px}
.lakeside-ending footer>*{max-width:850px;margin-left:auto;margin-right:auto}
.lakeside-ending footer{color:#fff;text-shadow:0 2px 5px #052f2a}
.lakeside-ending footer .logo-title,.lakeside-ending footer .logo-sub,.lakeside-ending footer .footer-links,.lakeside-ending footer .footer-links a,.lakeside-ending footer .copyright,.lakeside-ending footer .legal-links,.lakeside-ending footer .footer-tag{color:#fff!important;opacity:1;font-weight:600}
.lakeside-ending footer .copyright,.lakeside-ending footer .legal-links{font-size:15px}
.lakeside-ending footer .logo-sub{font-size:15px}
.lakeside-ending footer .footer-logo{background:#12463cee;padding:20px;border-radius:20px}
.lakeside-ending footer .footer-links{background:#12463cee;padding:15px 20px;border-radius:14px}
.lakeside-ending footer .legal-links{padding:10px;background:#12463cee;border-radius:12px}
.lakeside-ending footer .footer-tag,.lakeside-ending footer .copyright{background:#12463cee;padding:8px;border-radius:12px}

@media(max-width:760px){.welcome-scene{min-height:475px}
.welcome-copy{width:94%;padding:27px 15px}
.welcome-copy h2{font-size:29px}
.welcome-copy p{font-size:16px}
.peek{width:46%;height:270px;bottom:-30px}
.peek-sophie{left:-18px}
.peek-frankie{right:-18px}
.about-card{min-height:560px;padding:30px 20px;display:flex;flex-direction:column;justify-content:center;gap:25px}
.about-copy{position:static;width:100%;height:auto;padding:25px;background:#fffdf5f7}
.about-copy p{font-size:17px}
.about-side{position:static;width:200px;margin:0 auto;font-size:20px}
.newsletter>div.reveal{padding:27px 20px}
.signup-row{flex-direction:column}
.lakeside-ending{background-size:auto 100%;background-position:65% center}
.lakeside-ending .newsletter{padding:45px 16px 25px}
.lakeside-ending footer{padding-left:16px;padding-right:16px}}

@media(prefers-reduced-motion:reduce){.daylight-motion{display:none}
.welcome-scene .peek,.welcome-scene .moving-hand{animation:none!important}}
.a11y-reduce-motion .daylight-motion{display:none}
.a11y-reduce-motion .peek,.a11y-reduce-motion .moving-hand{animation:none!important}


#home .butterfly-float-low{left:auto!important;right:5%;top:18%!important;width:40px!important;z-index:3}
.lake-ripple-layer{position:absolute;inset:0;pointer-events:none;z-index:1;background:url('assets/sunrise-lake-crisp.webp') center 44%/cover no-repeat;filter:url(#lakeRipple);clip-path:polygon(17% 67%,88% 67%,84% 94%,20% 94%);mask-image:linear-gradient(transparent 65%,#000 73%,#000 87%,transparent 95%);opacity:.8}
.welcome-scene{background:linear-gradient(90deg,#fffde610,#fffde6cc 38%,#fffde6cc 62%,#fffde610),url('assets/welcome-forest-clean.webp') center/cover;min-height:460px}
.peek{bottom:-42px;height:350px;max-width:385px;width:30%}
.hello-bubble{position:absolute;z-index:5;top:-66px;left:14%;width:86%;padding:16px 10px;background:#fffdf7;border:3px solid #e379b4;border-radius:45% 45% 45% 8px;color:#872b64;font:800 22px 'Baloo 2',sans-serif;text-align:center;box-shadow:0 5px 15px #284f3020;transform:rotate(-9deg);line-height:1.2}
.hello-bubble:after{content:'';position:absolute;bottom:-15px;left:20%;width:22px;height:22px;background:#fffdf7;border-right:3px solid #e379b4;border-bottom:3px solid #e379b4;transform:rotate(45deg)}
.hello-bubble span{color:#de6b9b}
.peek-frankie .hello-bubble{left:0;transform:rotate(9deg);border-color:#5fbae8;color:#126c95}
.peek-frankie .hello-bubble:after{left:auto;right:20%;border-color:#5fbae8}
.peek-frankie .hello-bubble span{color:#dca327}
.welcome-copy{align-self:start;padding-top:34px}
.welcome-copy h2{font-size:32px}
.welcome-copy p{font-size:16px}
.welcome-scene.welcome-active .sophie-hand,.welcome-scene.welcome-active .frankie-hand{animation:clearWave 5.4s ease-in-out infinite!important;transform-box:view-box}
.welcome-scene.welcome-active .frankie-hand{animation-delay:.4s!important}
.welcome-scene.welcome-active .hello-bubble{animation:helloAppear 1s .8s both}
.welcome-scene.welcome-active .peek-frankie .hello-bubble{animation-delay:1.2s}
@keyframes clearWave{0%,48%,100%{rotate:0deg}8%,24%,40%{rotate:16deg}16%,32%{rotate:-16deg}}
@keyframes helloAppear{from{opacity:0;scale:.8}to{opacity:1;scale:1}}
#story .story-grid{padding-left:70px;padding-right:35px}
#story .story-copy{padding-right:12px}

.lakeside-ending footer{padding-top:90px;padding-bottom:40px}
.lakeside-ending footer .footer-shared-panel{max-width:900px;padding:32px 35px 26px;border-radius:24px;background:rgba(12,62,53,.93);box-shadow:0 16px 40px #0b3b3430}
.lakeside-ending footer .footer-shared-panel .footer-logo,.lakeside-ending footer .footer-shared-panel .footer-links,.lakeside-ending footer .footer-shared-panel .footer-tag,.lakeside-ending footer .footer-shared-panel .copyright,.lakeside-ending footer .footer-shared-panel .legal-links{background:transparent!important;box-shadow:none;border-radius:0;padding:0}
.lakeside-ending footer .footer-top{margin-bottom:20px}
.lakeside-ending footer .footer-links{margin-bottom:20px;gap:18px}
.lakeside-ending footer .social{margin-bottom:20px}
.lakeside-ending footer .copyright{margin-top:16px}
.lakeside-ending footer .legal-links{margin-top:12px}

@media(max-width:760px){.welcome-scene{min-height:535px}
.welcome-copy{padding-top:26px;width:92%}
.welcome-copy h2{font-size:29px}
.peek{width:44%;height:275px;bottom:-30px}
.hello-bubble{top:-46px;left:11%;width:94%;font-size:16px;padding:11px 6px;border-width:2px}
.hello-bubble:after{width:14px;height:14px;bottom:-10px;border-width:2px}
.peek-frankie .hello-bubble{left:-5%}
#story .story-grid{padding-left:42px;padding-right:28px}
#home .butterfly-float-low{right:3%;top:11%!important;width:30px!important}
.lakeside-ending footer{padding-top:65px}
.lakeside-ending footer .footer-shared-panel{padding:28px 20px}
.lake-ripple-layer{clip-path:polygon(5% 72%,95% 72%,95% 98%,5% 98%)}}

@media(prefers-reduced-motion:reduce){.lake-ripple-layer{display:none}
.welcome-scene.welcome-active .sophie-hand,.welcome-scene.welcome-active .frankie-hand,.welcome-scene.welcome-active .hello-bubble{animation:none!important}}
.a11y-reduce-motion .lake-ripple-layer{display:none}
.a11y-reduce-motion .welcome-scene .sophie-hand,.a11y-reduce-motion .welcome-scene .frankie-hand,.a11y-reduce-motion .hello-bubble{animation:none!important}


.welcome-scene .peek,.welcome-scene.welcome-active .peek,.welcome-scene .moving-hand,.welcome-scene.welcome-active .moving-hand,.welcome-scene .hello-bubble,.welcome-scene.welcome-active .hello-bubble{animation:none!important;rotate:none!important}
.welcome-scene .peek-frankie{transform:translateX(145%) rotate(-9deg);visibility:hidden}
.welcome-scene .peek-sophie{transform:translateX(-145%) rotate(9deg);visibility:hidden}
.welcome-scene .hello-bubble{opacity:0;transition:opacity .45s ease,scale .45s cubic-bezier(.2,.8,.3,1);scale:.75}
.welcome-scene .hello-bubble.is-speaking{opacity:1;scale:1}
.story-photo{position:relative;overflow:hidden}
.story-magic{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.magic-trail{fill:none;stroke:#ffe79a;stroke-width:3;stroke-linecap:round;stroke-dasharray:65 240;filter:url(#magicGlow);animation:magicFlow 7s linear infinite}
.magic-trail.second{animation-duration:9s;animation-direction:reverse;opacity:.75}
@keyframes magicFlow{to{stroke-dashoffset:-1220}}
.lake-ripple-layer{opacity:1}
.water-glints{animation-duration:5s;opacity:.4}

@media(prefers-reduced-motion:reduce){.story-magic{display:none}
.welcome-scene .peek{visibility:visible!important}
.welcome-scene .peek-frankie{transform:rotate(-9deg)!important}
.welcome-scene .peek-sophie{transform:rotate(9deg)!important}
.welcome-scene .hello-bubble{opacity:1;scale:1}}
.a11y-reduce-motion .story-magic{display:none}



.peek svg{overflow:hidden!important}

/* Localized motion: keep illustration edges and foreground intact. */
.lake-ripple-layer,.water-glints{display:none!important}

.scene-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}

#home>.wrap,#characters>.wrap,.lakeside-ending>section,.lakeside-ending>footer{position:relative;z-index:2}

.scene-water{filter:url(#lakeRipple)}

.scene-cloud{animation:cloudDrift 24s ease-in-out infinite;opacity:.65}

.scene-rays{animation:rayGlow 10s ease-in-out infinite;mix-blend-mode:screen}

@keyframes cloudDrift{0%,100%{transform:translateX(-2px)}50%{transform:translateX(3px)}}

@keyframes rayGlow{0%,100%{opacity:.06}50%{opacity:.24}}

.fixed-twinkle{position:absolute;width:22px;height:22px;pointer-events:none;color:#fff9cd;filter:drop-shadow(0 0 5px #ffcd46);animation:starTwinkle 3.8s ease-in-out infinite;transform:translate(-50%,-50%);font-size:24px;line-height:1}

@keyframes starTwinkle{0%,100%{opacity:.15;scale:.7}45%{opacity:1;scale:1.22}65%{opacity:.4;scale:.85}}

.star-flank{display:inline-block;animation:starTwinkle 4.5s ease-in-out infinite}
.star-flank:last-child{animation-delay:-2.1s}

#videos>.seam-vine{z-index:0!important;pointer-events:none}
#videos>.reveal{position:relative;z-index:3}
#videos .carousel-arrow{z-index:10;background:#fffdf4;box-shadow:0 3px 15px #153e3140}

@media(prefers-reduced-motion:reduce){.scene-motion,.fixed-twinkle{display:none!important}
.star-flank{animation:none!important}}

.a11y-reduce-motion .scene-motion,.a11y-reduce-motion .fixed-twinkle{display:none!important}
.a11y-reduce-motion .star-flank{animation:none!important}



.welcome-scene{background:linear-gradient(90deg,#092d2410,#fffde648 38%,#fffde648 62%,#092d2410),url('assets/welcome-forest-clean.webp') center/cover}

.welcome-copy{text-shadow:0 1px 2px #fff9da}
.welcome-copy p{font-weight:700}

#characters,#characters.bg-loaded{background-image:url('assets/sunrise-lake-crisp.webp');isolation:isolate}

#characters:after{content:'';position:absolute;inset:0;background:#123e3666;z-index:1;pointer-events:none}

#characters>.seam-vine{z-index:1!important;pointer-events:none}
#characters>.wrap{z-index:3}

#characters .sub{color:#fff!important;font-size:18px;font-weight:700;text-shadow:0 2px 5px #082e28;background:#113e35cf;border-radius:20px;width:fit-content;margin:10px auto 35px;padding:9px 20px}

.scene-cloud{opacity:1;animation:cloudDrift 22s ease-in-out infinite}
@keyframes cloudDrift{0%,100%{transform:translateX(-6px)}50%{transform:translateX(7px)}}

.lakeside-ending{background-image:url('assets/sunrise-lake-crisp.webp')}
.lakeside-ending:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,#083b3660);z-index:1;pointer-events:none}

#videos .video-carousel{isolation:isolate;overflow:visible}
#videos .video-grid{position:relative;z-index:1}
#videos .carousel-arrow{position:absolute!important;z-index:30!important;opacity:1!important;border:2px solid #1b6552}
#videos .carousel-arrow.prev{left:18px}
#videos .carousel-arrow.next{right:18px}

.wish-word-glow{position:absolute;left:35%;top:71%;width:23%;height:18%;border-radius:50%;background:radial-gradient(ellipse,#fffac275,transparent 68%);mix-blend-mode:screen;pointer-events:none;animation:rayGlow 3.5s ease-in-out infinite}

.author-lantern{position:absolute;left:18%;top:57%;width:6%;height:15%;border-radius:50%;background:radial-gradient(ellipse,#fffbdc 0,#ffc73870 32%,transparent 70%);mix-blend-mode:screen;pointer-events:none;animation:lanternGlow 4s ease-in-out infinite}

@keyframes lanternGlow{0%,100%{opacity:.25}45%{opacity:.85}65%{opacity:.5}}

.author-leaves{position:absolute;inset:0;background:inherit;border-radius:inherit;mask-image:linear-gradient(#000,transparent 26%);pointer-events:none;animation:leafBreeze 8s ease-in-out infinite;transform-origin:50% 0}

@keyframes leafBreeze{0%,100%{transform:skewX(-.2deg)}50%{transform:skewX(.35deg)}}

.about-copy,.about-side{z-index:2}

@media(prefers-reduced-motion:reduce){.wish-word-glow,.author-lantern,.author-leaves{display:none}}

.a11y-reduce-motion .wish-word-glow,.a11y-reduce-motion .author-lantern,.a11y-reduce-motion .author-leaves{display:none}


.welcome-copy{margin-top:20px;padding:16px 18px!important;border-radius:20px;background:rgba(13,57,43,.76);text-shadow:none}
.welcome-copy h2,.welcome-copy p{color:#fffbe8!important;text-shadow:none}
.welcome-copy p{margin-bottom:0}
@media(max-width:760px){.welcome-copy{width:85%;margin-top:16px}}


.welcome-scene .peek{z-index:5}
.welcome-scene .hello-bubble{border-radius:50%!important;padding:19px 12px;width:82%;left:12%;top:-68px}
.welcome-scene .hello-bubble:after{display:none}
.welcome-scene .peek-frankie .hello-bubble{left:6%}
.welcome-copy{width:36%;max-width:450px}

.author-lantern{left:17.5%;top:52%;width:7%;height:22%;z-index:1;background:radial-gradient(ellipse,#fffbe9dd 0,#ffd251a0 30%,#ffb62530 52%,transparent 72%);animation:lanternFlicker 2.8s ease-in-out infinite}

@keyframes lanternFlicker{0%,100%{opacity:.45}12%{opacity:.95}20%{opacity:.35}31%{opacity:.85}43%{opacity:.5}52%{opacity:1}65%{opacity:.4}73%{opacity:.8}88%{opacity:.55}}

.lakeside-ending{background:linear-gradient(180deg,#e6f5e433,#144c4310 55%,#083b36bb),url('assets/sunrise-lake-crisp.webp') center/cover no-repeat!important}
.lakeside-ending:after{display:none}
.lakeside-ending>.scene-motion{display:none!important}

@media(max-width:760px){.welcome-copy{width:85%;max-width:450px}
.welcome-scene .hello-bubble{top:-39px;width:90%;left:8%;padding:13px 5px;font-size:15px}
.welcome-scene .peek-frankie .hello-bubble{left:0}
.lakeside-ending{background-size:auto 100%!important;background-position:65% center!important}}



.welcome-scene .hello-bubble{padding:25px 12px;border-radius:50%!important}

.welcome-scene .hello-bubble:after{display:block!important;content:'';position:absolute;left:48%;right:auto;bottom:-13px;width:22px;height:22px;background:#fffdf7;border-right:3px solid #e379b4;border-bottom:3px solid #e379b4;transform:rotate(45deg);border-radius:0 0 4px 0}

.welcome-scene .peek-frankie .hello-bubble:after{left:auto;right:32%;border-color:#5fbae8}

@media(max-width:760px){.welcome-scene .hello-bubble{padding:18px 5px}
.welcome-scene .hello-bubble:after{width:16px;height:16px;bottom:-10px;border-width:2px}}


.footer-water-motion{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
.footer-water-motion ellipse{fill:none;stroke:#fff3b5;stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:footerRipple 7s ease-out infinite}
@keyframes footerRipple{0%{opacity:0;scale:.65 .5}25%{opacity:.32}100%{opacity:0;scale:1.5 1.2}}
@media(prefers-reduced-motion:reduce){.footer-water-motion{display:none}}
.a11y-reduce-motion .footer-water-motion{display:none}

.footer-water-motion{display:none!important}
.footer-lake-ripple{position:absolute;inset:0;z-index:1;pointer-events:none;background:inherit;filter:url(#footerLakeRipple);clip-path:polygon(0 0,0 0,0 0)}
@media(prefers-reduced-motion:reduce){.footer-lake-ripple{display:none}}
.a11y-reduce-motion .footer-lake-ripple{display:none}

/* Author and book information: inline fallback, enhanced as native dialogs. */
.info-details{margin-top:14px;text-align:left;}
.info-details>summary{color:#174d36;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:4px;padding:8px 0;}
.info-details>summary:focus-visible,.info-close:focus-visible{outline:3px solid #9b6bd6;outline-offset:4px;}
.info-dialog{box-sizing:border-box;width:min(680px,calc(100% - 32px));max-height:85vh;max-height:85dvh;padding:28px;border:2px solid #f2b93b;border-radius:22px;background:#fbf6ea;color:#1c2b22;box-shadow:0 24px 80px #0006;overflow:auto;overscroll-behavior:contain;}
.info-dialog::backdrop{background:rgba(8,25,19,.75);}
.info-close{display:block;margin:0 0 18px auto;padding:9px 16px;border:0;border-radius:999px;background:#174d36;color:#fff;font:700 14px 'Quicksand',sans-serif;cursor:pointer;}
.info-content h2{color:#173e31;font-size:28px;line-height:1.2;margin:0 0 18px;}
.info-content p{color:#1c2b22;font-size:16px;line-height:1.7;margin:0 0 16px;}
.info-content dl{margin:0;}.info-content dl>div{display:grid;grid-template-columns:1fr 1.4fr;gap:16px;padding:12px 0;border-bottom:1px solid #174d3626;}
.info-content dt{font-weight:700;}.info-content dd{margin:0;overflow-wrap:anywhere;}
.story-copy .book-quick-facts{font-weight:700;margin-bottom:0;}
.about-card:has(.info-details[open]){height:auto;min-height:440px;}
.about-copy:has(.info-details[open]){position:relative;left:auto;top:auto;width:100%;height:auto;}
@media(max-width:560px){.info-dialog{padding:20px;}.info-content h2{font-size:24px;}.info-content dl>div{grid-template-columns:1fr;gap:4px;}}

/* Reader questions and accessible video player */
.info-content h3{font-size:19px;line-height:1.3;color:#173e31;margin:22px 0 8px;}
.info-content a{text-decoration:underline;text-underline-offset:3px;}
.video-card{display:block;}
.video-card:focus-visible{outline:3px solid #9b6bd6;outline-offset:4px;}
.video-dialog{width:min(948px,calc(100% - 24px));max-height:90vh;max-height:90dvh;overflow:auto;border:2px solid #f2b93b;border-radius:18px;padding:16px;background:#123326;color:#fff;}
.video-dialog::backdrop{background:rgba(5,12,9,.88);}
.video-dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px;}
.video-dialog-toolbar a{text-decoration:underline;}
.video-dialog-toolbar button{padding:10px 16px;border:0;border-radius:24px;background:#f2b93b;color:#173e31;font:700 14px 'Quicksand',sans-serif;cursor:pointer;}
.video-dialog-toolbar :focus-visible{outline:3px solid #fff;outline-offset:3px;}
.video-dialog .video-modal-inner{max-width:none;}

/* V6A: exact-pixel crops; original cover geometry preserved on narrow screens. */
@media(max-width:600px){
  .hero{background-image:url('assets/sunrise-lake-crisp-mobile-crop.webp');background-size:auto 100%}
  .welcome-scene{background-image:linear-gradient(90deg,#092d2410,#fffde648 38%,#fffde648 62%,#092d2410),url('assets/welcome-forest-clean-mobile-crop.webp');background-size:cover,auto 100%}
}
/* No-JS default remains visible. These rules apply only with the observer installed. */
.wb-defer .welcome-scene:not(.media-ready),
.wb-defer .about-card:not(.media-ready),
.wb-defer #characters:not(.media-ready),
.wb-defer .lakeside-ending:not(.media-ready){background-image:none!important}