/* ============================================================
   13.1.2 — MOBILE MOTION PERFORMANCE PASS
   Phone-only compositor and scroll choreography refinements.
   Visual sequencing is preserved; expensive full-screen raster effects are
   replaced by transform/opacity equivalents where phones benefit most.
   ============================================================ */
@media (max-width:680px){
  /* Fixed procedural turbulence + a full-width blend layer are frequent mobile
     repaint triggers. Keep the texture and difference treatment, but constrain
     them to cheaper surfaces. */
  .grain{
    background-image:url("assets/paper-fibre.png")!important;
    background-size:192px 192px!important;
    mix-blend-mode:normal!important;
    opacity:.018!important;
  }
  .topbar{mix-blend-mode:normal!important;contain:layout style!important}
  .topbar .brand-mark,.topbar .menu-btn{mix-blend-mode:difference}

  /* Opening envelope: gradients already provide softness. Filters on large,
     moving surfaces are removed so extraction remains fully composited. */
  .gate-room-light{filter:none!important;animation:mobileGateLight1311 7.5s ease-in-out infinite alternate!important}
  .gate-shadow-leaf{filter:none!important;opacity:.035!important}
  .gate-shadow-leaf-a,.gate-shadow-leaf-b{animation:none!important}
  .suite-ground-shadow,.suite-stage .envelope,.suite-stage .envelope::after{filter:none!important}
  .gate.opening .wax-seal{filter:none!important}
  .gate.letter-focus .suite-stage,
  .gate.letter-focus .gate-room-light,
  .gate.letter-focus .gate-room-vignette,
  .gate.letter-focus .gate-shadow-leaf,
  .gate.letter-focus .suite-ground-shadow{
    filter:none!important;
    opacity:.22!important;
  }
  .gate-presented-letter{box-shadow:0 24px 62px rgba(11,8,6,.25),0 1px 0 rgba(255,255,255,.72) inset!important}
  .gate-presented-letter.is-focused{box-shadow:0 28px 72px rgba(11,8,6,.28),0 1px 0 rgba(255,255,255,.72) inset!important}

  /* Full-screen clipping while scrolling is costly on Safari/Chrome Android.
     The RSVP keeps the same rise/scale/fade reveal without clipping the page. */
  .rsvp-paper,.rsvp-section:not(.has-answer) .rsvp-paper{
    clip-path:none!important;
    -webkit-clip-path:none!important;
    will-change:transform,opacity!important;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }

  /* Finale copy already has authored opposing transforms and fades. On phones
     those carry the reveal; avoid additional per-frame text clipping. The
     selected Eagle Horizon final statement still keeps its dedicated write-on. */
  .finale-opening-copy strong b,.finale-opening-copy strong em,
  .finale-copy h2 span,.finale-copy h2 em{
    clip-path:none!important;
    -webkit-clip-path:none!important;
    will-change:transform,opacity!important;
  }

  /* The dedicated webXCode mobile entrance is one-time motion. Keep the same
     stagger and direction, but make logo/copy compositor-only (no blur/masks). */
  #creatorCredits .creator-red-glow{filter:none!important;opacity:.30!important}
  #creatorCredits .webx-brand-image::after{filter:none!important}
  #creatorCredits.wx-armed:not(.wx-in) .webx-brand-image img{
    clip-path:none!important;-webkit-clip-path:none!important;filter:none!important;
    opacity:0!important;transform:translate3d(-18px,0,0) scale(.985)!important;
  }
  #creatorCredits.wx-armed.wx-in .webx-brand-image img{
    clip-path:none!important;-webkit-clip-path:none!important;filter:none!important;
    opacity:1!important;transform:translate3d(0,0,0) scale(1)!important;
    transition:opacity .48s ease .20s,transform .70s var(--wx-ease) .20s!important;
  }
  #creatorCredits.wx-armed:not(.wx-in) .creator-message h2 span,
  #creatorCredits.wx-armed:not(.wx-in) .creator-message h2 em,
  #creatorCredits.wx-armed.wx-in .creator-message h2 span,
  #creatorCredits.wx-armed.wx-in .creator-message h2 em{
    clip-path:none!important;-webkit-clip-path:none!important;filter:none!important;
  }
  #creatorCredits.wx-armed .webx-brand-image img,
  #creatorCredits.wx-armed .creator-message h2 span,
  #creatorCredits.wx-armed .creator-message h2 em{will-change:transform,opacity!important}
  #creatorCredits.wx-settled .webx-brand-image img,
  #creatorCredits.wx-settled .creator-message h2 span,
  #creatorCredits.wx-settled .creator-message h2 em{will-change:auto!important}

  /* Isolate repeated cards/controls so their fades/scales do not invalidate
     neighbouring content during native touch scroll. */
  .gallery-card,.event-row,.rsvp-choice,.proposal-detail{contain:paint style}
  .gallery-card,.gallery-card img,.opening-photo,.story-media,.event-photo-stack,.finale-stage{
    backface-visibility:hidden;-webkit-backface-visibility:hidden;
  }

  /* Prevent tap-highlight flashes from interrupting motion continuity. */
  a,button{-webkit-tap-highlight-color:transparent}
}

@keyframes mobileGateLight1311{
  from{transform:translate(-50%,-46%) rotate(-1deg) scale(.985);opacity:.68}
  to{transform:translate(-50%,-46%) rotate(-1deg) scale(1.018);opacity:.82}
}


/* ============================================================
   13.1.2 — POST SAVE-THE-DATE SMOOTHNESS
   Mobile story/day scenes are fully scroll-driven. Never combine a per-frame
   CSS-variable animation with a time-based transition on the same property.
   ============================================================ */
@media(max-width:680px){
  /* Give five Our Journey beats a little more room without creating dead air. */
  .story-sequence{height:525vh!important}

  /* The parent keeps the slow cinematic push. Individual full-screen photos
     only crossfade, avoiding several simultaneous large texture transforms. */
  .story-photo,
  .story-photo[data-image-guard="1"]{
    transition:none!important;
    transform:translate3d(0,0,0) scale(1.035)!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }
  .story-media{
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
    transform:translateZ(0) scale(var(--story-media-s,1.03))!important;
  }

  /* Proposal: scene opacity/translation + image scale provide the reveal on
     phones. Removing clip-path keeps the entire beat on the compositor. */
  .proposal-detail{
    clip-path:none!important;
    -webkit-clip-path:none!important;
    will-change:auto!important;
  }
  .proposal-detail img{
    transform:translateZ(0) scale(var(--proposal-photo-s,1.035))!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }

  /* SVG dash animation and a moving tiled grid force paint on mobile. The
     venue still fades, lifts, zooms and pins in exactly on the authored beat. */
  .venue-map svg{
    stroke-dashoffset:0!important;
    will-change:auto!important;
  }
  .map-grid{transform:none!important;will-change:auto!important}
  .venue-image img{
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }

  /* Keep the dress curtain as compositor transforms, but avoid promoting all
     five palette cards for the full page lifetime. */
  .palette-swatch{will-change:auto!important}
  .silk{backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important}
}