/* Modern island mobility: direct manipulation, model transitions, spatial depth.
   Existing brand colours and typography are retained. Native CSS + Web Animations.
   Layering: decoration 0, content 1, sticky header 50, progress 80 (existing). */
.header-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}
.button,.nav-cta{border-radius:12px;position:relative;isolation:isolate;overflow:hidden}
.button:active,.nav-cta:active{transform:scale(.98)}
.tap-wave{position:absolute;pointer-events:none;border-radius:50%;background:currentColor;opacity:0;z-index:-1}
.hero-frame,.network-machine img,.charging-photo,.product-card,.booking-form{border-radius:18px}
.hero-frame{background:#dde7da}
.island-hero-image .hero-frame{height:570px}
.island-hero-image .hero-campaign{width:100%;height:100%;object-fit:cover;object-position:57% center}
.hero-alternate{position:absolute;inset:0;overflow:hidden}
.island-hero-image .hero-setting{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.island-hero-image .hero-selected-bike{position:absolute;inset:9% 0 0;width:100%;height:86%;object-fit:contain;filter:drop-shadow(3px 20px 13px #183d3740)}
.hero-model-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;padding:5px;border:1px solid #ccd8ce;border-radius:14px;background:#e6ece3;margin-top:16px}
.hero-model-picker button{position:relative;isolation:isolate;overflow:hidden;background:transparent;color:#234f48;border:0;border-radius:10px;min-height:44px;font-size:11px;font-weight:600;transition:background .25s,color .25s,box-shadow .25s}
.hero-model-picker button[aria-pressed=true]{background:#234f48;color:#fff;box-shadow:0 4px 12px #234f4820}
.hero-model-picker button:hover:not([aria-pressed=true]){background:#d2dfd0}
.motion-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.product-card{position:relative;isolation:isolate;overflow:hidden;border:1px solid #ccd5c7!important}
.product-visual{perspective:1000px;isolation:isolate}
.product-visual:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(ellipse at var(--light-x,50%) var(--light-y,50%),#ffffffb3,transparent 65%);transition:opacity .4s}
.product-visual.pointer-active:before{opacity:1}
.product-visual img{transition:transform .6s cubic-bezier(.16,1,.3,1);transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
.product-card:hover .product-visual img,.product-card:focus-within .product-visual img{transform:perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)) translateY(-9px) scale(1.055)}
.island-product-art .island-bike{transform:perspective(1200px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .65s cubic-bezier(.16,1,.3,1)}
.island-stage{object-position:center 58%}
.island-image img{transform:scale(1.06)}
.gallery-view{overflow:hidden;border-radius:18px}
.photo-dialog[open]{animation:dialog-arrive .3s cubic-bezier(.22,1,.36,1)}
.photo-dialog::backdrop{background:#0c2824c9;backdrop-filter:blur(8px)}
@keyframes dialog-arrive{from{opacity:.3;transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){.product-card:hover{box-shadow:0 22px 48px #234f4820}.button:hover,.nav-cta:hover{box-shadow:0 8px 22px #234f4825}.station-card:hover{transform:translateY(-4px)}.station-card{transition:transform .35s,box-shadow .35s}}
@media(prefers-reduced-motion:no-preference){
 @view-transition{navigation:auto}
 ::view-transition-old(root){animation:page-out .18s ease both}
 ::view-transition-new(root){animation:page-in .38s cubic-bezier(.22,1,.36,1) both}
 @keyframes page-out{to{opacity:0;transform:translateY(-8px)}}
 @keyframes page-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
 .fx-enter{animation:island-arrive .95s cubic-bezier(.16,1,.3,1) var(--arrival-delay,0ms) both}
 .hero-frame.fx-enter .hero-campaign{animation:coastal-camera 3.4s cubic-bezier(.2,.7,.3,1) both}
 /* A changed model is animated by WAAPI; do not replay entrance on every image. */
 .hero-frame.fx-enter .hero-setting,.hero-frame.fx-enter .hero-selected-bike{animation:none}
 @supports(animation-timeline:scroll()){
  .scroll-progress{animation:reading-progress linear both;animation-timeline:scroll(root block)}
  @keyframes reading-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
 }
 @supports(animation-timeline:view()){
  .island-image img{animation:coastal-travel linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
  .footer-island-signature strong{animation:island-word linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  @keyframes coastal-travel{from{transform:scale(1.12) translateY(-2%)}to{transform:scale(1.06) translateY(2%)}}
  @keyframes island-word{from{opacity:.45;transform:translateX(-35px)}to{opacity:1;transform:translateX(0)}}
 }
}
@media(max-width:1180px){.island-hero-image .hero-frame{height:530px}}
@media(max-width:820px){.island-hero-image .hero-frame{height:auto;aspect-ratio:1.18}.hero-model-picker{margin-top:14px}.island-hero-image .hero-campaign{position:absolute;inset:0}.island-hero-image .hero-selected-bike{inset:5% 0 0;height:94%}.hero-model-picker button{font-size:10px}.hero-frame,.network-machine img,.charging-photo,.product-card,.booking-form{border-radius:14px}}
@media(prefers-reduced-motion:reduce){
 .product-visual img,.product-card:hover .product-visual img,.product-card:focus-within .product-visual img,.island-product-art .island-bike,.island-image img{transform:none!important}
 .hero-alternate,.hero-frame img,.footer-island-signature strong,.photo-dialog[open]{animation:none!important}
 .station-card:hover,.button:active,.nav-cta:active{transform:none}
 ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
@media(prefers-reduced-transparency:reduce){.photo-dialog::backdrop{background:#183d37;backdrop-filter:none}}