/* App reference: NotificationOverlayView (36pt corners, 20pt padding,
   expanded 14/12/11pt type) and FerryReadingSectionPalette's day surface.
   Only transform/translate/opacity animate; no canvas or backdrop capture. */
.notifications-section{--surface-top:#172e3e;--accent:#b2d4eb;--muted:#b1c5d3;background:var(--surface-top);color:#edf4f8}
.notifications-section{position:relative;isolation:isolate;overflow:clip}
.notifications-section>.shell{position:relative;z-index:1}
/* Lilla Varholmen / road 155: a different focus from the Hönö timetable. */
.notifications-section::before{
  content:"";position:absolute;inset:-12px;pointer-events:none;
  background:url("assets/map-night.jpg") 72% 48% / cover no-repeat;
  filter:blur(4px);opacity:.85;
}
.notifications-section::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#172e3ee6 0%,#172e3eb3 43%,#172e3e40 78%),
    linear-gradient(180deg,#172e3e70,transparent 30%,transparent 70%,#172e3e99);
}
@media(max-width:700px){
  .notifications-section::before{background-position:61% 51%}
  .notifications-section::after{background:linear-gradient(180deg,#172e3ee6 0%,#172e3eb3 42%,#172e3e33 65%,#172e3e80 100%)}
}
.notifications-intro{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:70px}
.notifications-body{margin-top:30px;font-size:18px;font-weight:400;color:var(--muted)}
.notifications-body p+p{margin-top:18px}
.notification-examples{display:grid;gap:12px;min-width:0;width:100%;max-width:520px;justify-self:center;align-self:center;padding:0}
.notification-sample{padding:24px;border:0;border-radius:36px;background:#215c86;color:#d8efff;font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-stretch:132%;box-shadow:none}
.notification-sample strong{display:block;font-size:16px;font-weight:500;line-height:1.35;letter-spacing:0;color:rgb(216 239 255 / .96)}
.notification-sample p{font-size:14px;font-weight:300;line-height:1.6;color:rgb(216 239 255 / .9);margin-top:9px}
.notification-time{display:block;font-size:12px;line-height:1.5;font-weight:400;color:rgb(216 239 255 / .6);margin-top:9px}
.notification-time-arrow{display:inline-block;transform:translateY(-.14em);margin-inline:3px}
.notification-examples .notification-sample{padding:16px 20px;border-radius:28px}
.notification-examples[data-notification-motion] .notification-sample{opacity:0;transform:translateY(38px) scale(.95);transform-origin:50% 100%;transition:opacity .3s ease,transform .45s cubic-bezier(.4,0,.7,.2);transition-delay:var(--notification-delay,0ms)}
.notification-examples[data-notification-motion].is-visible .notification-sample{opacity:1;transform:translateY(0) scale(1);transition:opacity .45s ease,transform .8s cubic-bezier(.2,.85,.25,1.12);transition-delay:var(--notification-delay,0ms)}
.notification-examples .notification-sample:nth-child(2){--notification-delay:220ms}
.notification-examples .notification-sample:nth-child(3){--notification-delay:440ms}
.notification-examples[data-notification-motion][data-notification-direction="up"] .notification-sample{transition-delay:calc(440ms - var(--notification-delay,0ms))}
/* One card swipes at a time, scheduled every 3–5 seconds while visible.
   Individual translate stays separate from the scroll entrance's transform.
   No layout animation or actual dismissal. */
@media(prefers-reduced-motion:no-preference){
  .notification-examples[data-notification-motion].is-visible .notification-sample.is-swiping{animation:notification-swipe-preview 2.6s both}
}
@keyframes notification-swipe-preview{
  0%,12%{translate:0 0;animation-timing-function:cubic-bezier(.4,0,.2,1)}
  42%,58%{translate:var(--notification-swipe-distance,-36px) 0;animation-timing-function:cubic-bezier(.22,1,.36,1)}
  88%,100%{translate:0 0}
}
@media(max-width:700px){.notification-examples{--notification-swipe-distance:-16px}}
.notification-permissions{border-top:1px solid #b2d4eb25;padding-top:24px;margin-top:55px;color:var(--muted);font-size:12px;max-width:900px}
.highlight-notifications{flex-basis:min(500px,78vw);height:660px;padding:32px;background:linear-gradient(145deg,#1c3547,#34586b);color:#e2eff6}
.notification-card-stack{display:grid;gap:18px;align-content:center;flex:1;padding-bottom:45px}
.notification-card-stack .notification-sample{padding:20px;transform:rotate(-3deg)}
.notification-card-stack .notification-sample:last-child{transform:rotate(3deg);margin-left:20px}
.highlight-notifications .round-link{left:24px;right:auto}
.notification-card-stack .notification-time{font-size:10px}
@media(max-width:360px){.highlight-notifications .notification-card-stack .notification-sample:last-child{display:none}}
@media(prefers-reduced-motion:reduce){.notification-examples[data-notification-motion] .notification-sample{opacity:1;transform:none;transition:none}}
@media(max-width:1000px){.notifications-intro{gap:35px}.notifications-copy h2{font-size:54px}}
@media(max-width:700px){.notifications-intro{grid-template-columns:1fr;gap:30px}.notifications-copy h2{font-size:44px}.notifications-body{font-size:17px;margin-top:24px}.notification-examples{padding:0;gap:12px}.notification-sample{padding:20px;border-radius:22px}.notification-permissions{margin-top:35px}.highlight-notifications{flex-basis:86vw;height:560px;padding:28px}.notification-card-stack{gap:14px;padding-bottom:36px}.notification-card-stack .notification-sample{padding:16px}.notification-card-stack .notification-sample strong{font-size:14px}.notification-card-stack .notification-sample p{font-size:12px}}