/* ================= HỒI CHUYỂN: NGƯỜI ĐƯA THƯ ================= */
.ride{ position:fixed; inset:0; z-index:30; overflow:hidden; visibility:hidden;
  background:linear-gradient(var(--ivory) 0 60%, var(--blush) 100%); }
.ride::before{ content:""; position:absolute; inset:0; background:var(--paper); opacity:.8; pointer-events:none; }

.sun{ position:absolute; right:14%; top:26%; width:clamp(70px, 16vw, 150px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle, rgb(227 154 151 / .55), rgb(227 154 151 / .18) 62%, transparent 70%); }

.ride-cap{ position:absolute; z-index:2; left:max(20px, 5vw); top:max(22px, env(safe-area-inset-top)); width:min(56vw, 440px); }
.ride-cap small{ display:block; font:500 10px/1.4 var(--f-mono); letter-spacing:.2em; color:var(--red); }
.ride-cap p{ margin:10px 0 0; font:italic 400 clamp(19px, 5vw, 30px)/1.3 var(--f-display); color:var(--ink); }
.ride-cap em{ font-style:normal; color:var(--red); }

.layer{ position:absolute; left:0; right:0; overflow:hidden; pointer-events:none; }
.layer .strip{ position:absolute; top:0; bottom:0; left:0; will-change:transform;
  background-repeat:repeat-x; background-size:auto 100%; }
.sky { bottom:64%; height:12%; opacity:.9; }
.far { bottom:24%; height:34%; }
.near{ bottom:24%; height:40%; }
.sky  .strip{ background-image:url(../assets/svg/street-sky.svg); }
.far  .strip{ background-image:url(../assets/svg/street-far.svg); }
.near .strip{ background-image:url(../assets/svg/street-near.svg); }

.road{ position:absolute; left:0; right:0; bottom:0; height:24%; overflow:hidden;
  background:var(--blush); border-top:2px solid var(--ink); }
.road .dash{ position:absolute; top:40%; left:0; width:calc(100% + 60px); height:3px; will-change:transform;
  background:repeating-linear-gradient(90deg, var(--red-soft) 0 30px, transparent 30px 60px); }

.bike   { position:absolute; left:0; bottom:calc(24% - 2px); width:min(60vw, 420px, 46svh); overflow:visible; will-change:transform; }
.mailbox{ position:absolute; left:0; bottom:24%; width:min(20vw, 112px, 13svh); will-change:transform; }
.mailbox svg{ display:block; width:100%; overflow:visible; }
.mailbox .rubber{ top:30%; font-size:10px; padding:4px 6px 3px; color:var(--ivory); border-color:var(--ivory); mix-blend-mode:normal;
  box-shadow:inset 0 0 0 2px var(--red-velvet), inset 0 0 0 3px var(--ivory); }

.fly-letter{ position:absolute; left:0; top:0; width:84px; height:56px; visibility:hidden; will-change:transform; z-index:4;
  background:var(--ivory); border:2px solid var(--red); border-radius:3px;
  box-shadow:0 6px 16px rgb(42 23 20 / .18); }
.fly-letter::after{ content:""; position:absolute; inset:0; background-repeat:no-repeat; background-size:100% 60%;
  background-image:
    linear-gradient(to bottom right, transparent 49%, var(--red-soft) 50% 53%, transparent 54%),
    linear-gradient(to bottom left,  transparent 49%, var(--red-soft) 50% 53%, transparent 54%); }

.bell{ position:absolute; left:0; top:0; visibility:hidden; white-space:nowrap; z-index:4;
  font:italic 600 19px var(--f-display); color:var(--red); }

.ride-date{ position:absolute; top:max(20px, env(safe-area-inset-top)); right:20px; text-align:right; z-index:2;
  font-family:var(--f-mono); color:var(--ink); }
.ride-date small{ display:block; font-size:10px; letter-spacing:.2em; opacity:.6; transition:color .4s, opacity .4s; }
.ride-date b{ display:block; font-size:clamp(28px, 7vw, 40px); line-height:1.1; font-weight:500; font-variant-numeric:tabular-nums; transition:color .4s; }
.ride-date span{ display:block; font-size:11px; letter-spacing:.2em; opacity:.6; }
.ride-date.is-today b, .ride-date.is-today small{ color:var(--red); opacity:1; }

.skip{ position:absolute; right:16px; bottom:max(16px, env(safe-area-inset-bottom)); z-index:5;
  background:none; border:0; padding:8px; font:500 13px var(--f-body); color:var(--ink); opacity:0; }

/* ================= MÀN ĐỎ ================= */
.curtain{ position:fixed; inset:0; z-index:40; overflow:hidden; visibility:hidden; background:var(--red-velvet); }
.curtain img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 85%; }
.curtain::after{ content:""; position:absolute; inset:0 0 50% 0; background:linear-gradient(rgb(110 20 30 / .35), transparent); pointer-events:none; }
.curtain h2{ position:absolute; z-index:2; top:12%; left:8%; right:8%; margin:0; color:var(--ivory);
  font:italic 400 clamp(40px, 11vw, 104px)/1.05 var(--f-display); text-shadow:0 2px 30px rgb(80 0 10 / .35); }
.petals{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.petal{ position:absolute; top:-30px; width:10px; height:13px; border-radius:60% 0 60% 0; background:#C8323B; opacity:.9; will-change:transform; }

@media (orientation: landscape) and (min-width: 640px){
  .curtain img{ object-position:50% 42%; }
  .curtain h2{ top:10%; font-size:clamp(40px, 7.4vw, 120px); }
}