/* Shared-edge type reveals over the first card’s product image and film. */
@media screen{
  .app-surface .home-view>.identity-hero{display:block;--intro-neutral:#e6e6e8;--intro-left:clamp(24px,3vw,44px);--intro-right:var(--intro-left);width:100%;margin:16px 0 48px;padding:0;gap:0}
  .identity-hero .identity-copy{min-width:0;width:100%}
  .app-surface .identity-copy :is(h1,h2).split-title{--intro-duration:7.2s;--intro-play-state:paused;--smooth-radius:28px;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;width:100%;border-radius:28px;overflow:hidden;background:#e6e6e8;font-size:clamp(30px,2.8vw,44px);font-weight:500;line-height:1.4;letter-spacing:-.045em}
  html[lang="en"] .app-surface .identity-copy :is(h1,h2).split-title{font-size:clamp(26px,2.4vw,36px);letter-spacing:-.04em}
  .app-surface .split-title>.hero-line{display:block;position:relative;min-width:0;height:clamp(320px,calc(100svh - var(--masthead-height,76px) - 130px),640px);overflow:hidden;isolation:isolate;white-space:normal}
  .split-title>.intro-product,.split-title>.intro-visual{background:var(--intro-neutral)}
  .split-title::after,.intro-visual::before{content:none}
  .intro-type-mask{display:block;position:absolute;bottom:24%;overflow:hidden;box-sizing:border-box}
  .intro-type-mask{contain:layout paint}
  .split-title.hero-in-view .intro-ink{will-change:transform}
  .split-title.hero-in-view .intro-backdrop{will-change:opacity}
  .intro-product .intro-type-mask{left:var(--intro-left);right:0;padding:8px 40px 8px 0;text-align:right}
  .intro-visual .intro-type-mask{left:0;right:var(--intro-right);padding:8px 0 8px 40px;text-align:left}
  .intro-ink{display:block}
  .intro-product .intro-ink{--intro-hidden-x:calc(100% + 64px);--intro-hidden-y:0px}
  .intro-visual .intro-ink{--intro-hidden-x:calc(-100% - 64px);--intro-hidden-y:0px}
  .split-title.intro-motion-ready:not(.intro-started) .intro-ink{visibility:hidden}
  .app-surface .split-title .motion-phrase{display:inline-grid;white-space:pre-line;text-align:inherit}
  .app-surface .split-title .motion-phrase::after{white-space:pre-line;line-height:inherit}
  .app-surface .split-title .motion-phrase>span{white-space:pre-line;justify-self:stretch;line-height:inherit;color:#25252b;font-weight:500;animation:none}
  .app-surface .split-title .intro-visual .motion-phrase>span{color:#fafafa}
  .app-surface .split-title .intro-verb{display:inline-block;position:relative;white-space:nowrap;vertical-align:baseline;line-height:1;color:inherit}
  .intro-verb::after{content:'';position:absolute;left:0;right:0;bottom:-.11em;height:clamp(3px,.08em,5px);border-radius:0;background:currentColor;transform:scaleX(0);transform-origin:left center;pointer-events:none}
  .intro-product .intro-verb::after{transform-origin:right center}
  .split-title.type-ready.intro-started .intro-product .intro-ink{animation:intro-product-out var(--intro-duration) cubic-bezier(.22,.8,.25,1) 1 both}
  .split-title.type-ready.intro-started .intro-visual .intro-ink{animation:intro-visual-out var(--intro-duration) cubic-bezier(.22,.8,.25,1) 1 both}
  .app-surface .split-title.type-ready.intro-started .intro-product .intro-verb{animation:intro-product-weight var(--intro-duration) cubic-bezier(.22,.75,.22,1) 1 both}
  .app-surface .split-title.type-ready.intro-started .intro-visual .intro-verb{animation:intro-visual-weight var(--intro-duration) cubic-bezier(.22,.75,.22,1) 1 both}
  .split-title.type-ready.intro-started .intro-product .intro-verb::after{animation:intro-product-underline var(--intro-duration) cubic-bezier(.22,.75,.22,1) 1 both}
  .split-title.type-ready.intro-started .intro-visual .intro-verb::after{animation:intro-visual-underline var(--intro-duration) cubic-bezier(.22,.75,.22,1) 1 both}
  .app-surface .identity-copy :is(h1,h2).split-title.hero-in-view{--intro-play-state:running}
  .motion-paused .app-surface .identity-copy :is(h1,h2).split-title{--intro-play-state:paused}
  .split-title.type-ready.intro-started .intro-ink,.split-title.type-ready.intro-started .intro-verb,.split-title.type-ready.intro-started .intro-verb::after{animation-play-state:var(--intro-play-state)!important}
}
@keyframes intro-product-out{0%,4%,94%,100%{transform:translate3d(var(--intro-hidden-x),var(--intro-hidden-y),0)}20%,76%{transform:translate3d(0,0,0)}}
@keyframes intro-visual-out{0%,16%,96%,100%{transform:translate3d(var(--intro-hidden-x),var(--intro-hidden-y),0)}32%,76%{transform:translate3d(0,0,0)}}
@keyframes intro-product-weight{0%,12%,92%,100%{font-weight:500}25%{font-weight:900}30%{font-weight:770}35%{font-weight:820}40%,76%{font-weight:800}86%{font-weight:530}}
@keyframes intro-visual-weight{0%,24%,92%,100%{font-weight:500}37%{font-weight:900}42%{font-weight:770}47%{font-weight:820}52%,76%{font-weight:800}86%{font-weight:530}}
@keyframes intro-product-underline{0%,12%,86%,100%{transform:scaleX(0)}25%,76%{transform:scaleX(1)}}
@keyframes intro-visual-underline{0%,24%,86%,100%{transform:scaleX(0)}37%,76%{transform:scaleX(1)}}

/* One aspect-ratio rule governs both cards, masks, corners and imagery.
   Wide mode requires >6:5 and at least 720px so both text panels fit.
   In a stack, the upper text rises and the lower text descends from the seam. */
@media screen and (max-width:719px),screen and (max-aspect-ratio:6/5){
  .app-surface .home-view>.identity-hero{--intro-left:20px;--intro-right:20px;margin-top:12px;margin-bottom:32px}
  .app-surface .home-view>.main-preview-tabs{margin-bottom:16px}
  .app-surface .identity-copy :is(h1,h2).split-title{--smooth-radius:24px;border-radius:24px;grid-template-columns:minmax(0,1fr);font-size:clamp(28px,4.2vw,38px)}
  html[lang="en"] .app-surface .identity-copy :is(h1,h2).split-title{font-size:clamp(23px,3.4vw,32px)}
  .app-surface .split-title>.hero-line{height:clamp(max(180px,calc(2.8em + 44px)),27svh,290px)}
  .intro-product .intro-type-mask{left:var(--intro-left);right:var(--intro-right);bottom:0;padding:8px 0 36px;text-align:left}
  .intro-visual .intro-type-mask{left:var(--intro-left);right:var(--intro-right);top:0;bottom:auto;padding:36px 0 8px}
  .intro-product .intro-ink{--intro-hidden-x:0px;--intro-hidden-y:calc(100% + 48px)}
  .intro-visual .intro-ink{--intro-hidden-x:0px;--intro-hidden-y:calc(-100% - 48px)}
  .intro-product .intro-verb::after{transform-origin:left center}
}
@media(prefers-reduced-motion:reduce){
  .app-surface .split-title .intro-ink{animation:none!important;transform:none!important;visibility:visible!important}
  .app-surface .split-title .motion-phrase>span{animation:none!important;font-weight:500!important}
  .app-surface .split-title .intro-verb{animation:none!important;font-weight:800!important}
  .app-surface .split-title .intro-verb::after{animation:none!important;transform:scaleX(1)!important}
}

/* Two physical cards are rotated after each forward slide, without clones. */
@media screen{
  .intro-carousel{width:100%;overflow:hidden;border-radius:28px;background:var(--intro-neutral)}
  .intro-rail{display:flex;gap:16px;width:100%;transform:translate3d(0,0,0)}
  .intro-slide{flex:0 0 100%;min-width:0}
  .intro-controls{display:flex;align-items:center;justify-content:center;position:relative;gap:4px;margin-top:10px;min-height:44px}
  .intro-dots{display:flex;gap:0}
  .intro-dots button,.intro-pause{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:transparent;cursor:pointer;color:#78787f}
  .intro-dots button>span{width:7px;height:7px;border-radius:50%;background:#c3c3c9;transition:background 300ms,transform 400ms cubic-bezier(.22,.8,.25,1)}
  .intro-dots button[aria-current="true"]>span{background:#38383e;transform:scale(1.2)}
  .intro-pause svg{width:18px;height:18px;fill:currentColor;stroke:none}
  .intro-dots button:focus-visible,.intro-pause:focus-visible{outline:2px solid #777781;outline-offset:-5px;border-radius:10px}
  .intro-pause[hidden]{display:none}
}
@media screen and (max-width:719px),screen and (max-aspect-ratio:6/5){.intro-carousel{border-radius:24px}}
@media(prefers-reduced-motion:reduce){.intro-dots button>span{transition:none}}

/* A manually selected card remains readable while autoplay is paused. */
@media screen{
  .app-surface .split-title.intro-static .intro-ink{animation:none!important;transform:none!important;visibility:visible!important}
  .app-surface .split-title.intro-static .intro-verb{animation:none!important;font-weight:800!important}
  .split-title.intro-static .intro-verb::after{animation:none!important;transform:scaleX(1)!important}
}

/* Media is below the shared-edge masks; both retain the established card layout. */
@media screen{
  .intro-backdrop{display:block;position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  .intro-backdrop img,.intro-backdrop video{display:block;position:absolute;inset:0;width:100%;height:100%}
  .intro-image-backdrop img{object-fit:contain;object-position:50% 36%;padding:12px;box-sizing:border-box;transform:scale(.9);transform-origin:center}
  .intro-video-backdrop{background:#0b0b0d}
  .intro-video-backdrop video{object-fit:cover;object-position:50% 52%}
  .intro-backdrop::after{content:'';position:absolute;inset:0}
  .intro-image-backdrop::after{content:none}
  .intro-video-backdrop::after{background:rgba(0,0,0,.62)}
  .intro-type-mask{z-index:1}
}

/* Fade the whole media layer, including black backing and the video overlay.
   Every panel rests on the same neutral grey before/after the shared clock. */
@media screen{
  .split-title .intro-backdrop{opacity:0}
  .split-title.type-ready.intro-started .intro-backdrop{animation:intro-render-fade var(--intro-duration) ease-in-out 1 both;animation-play-state:var(--intro-play-state)!important}
  .split-title.intro-static .intro-backdrop{animation:none!important;opacity:1}
}
@keyframes intro-render-fade{0%,96%,100%{opacity:0}14%,76%{opacity:1}}
@media(prefers-reduced-motion:reduce){.split-title .intro-backdrop{animation:none!important;opacity:1!important}}

/* Card 1: keep the transparent render continuous across the whole panel.
   Only the outer card clips it; never crop it at an internal caption boundary.
   In wide mode the intrinsic image shifts up/left, leaving its transparent
   lower-right corner for type. Stacked mode retains its right-hand framing. */
@media screen{
  [data-intro-slide="0"] .intro-image-backdrop{
    inset:0;width:100%;height:100%;
  }
  [data-intro-slide="0"] .intro-image-backdrop img{
    inset:auto;left:-12%;top:-24%;width:120%;height:auto;max-width:none;
    object-fit:contain;object-position:center;padding:0;transform:none;
  }
  [data-intro-slide="0"] .intro-image-backdrop::after{content:none}
  .app-surface [data-intro-slide="0"] .intro-product .motion-phrase>span{color:#25252b;text-shadow:none}
}
@media screen and (max-width:719px),screen and (max-aspect-ratio:6/5){
  [data-intro-slide="0"] .intro-product{--intro-copy-space:max(152px,calc(4em + 40px))}
  html[lang="en"] [data-intro-slide="0"] .intro-product{--intro-copy-space:calc(6.2em + 40px)}
  [data-intro-slide="0"] .intro-image-backdrop{
    inset:0 auto 0 var(--intro-copy-space);width:100%;height:100%;
  }
  [data-intro-slide="0"] .intro-image-backdrop img{
    inset:0;width:100%;height:100%;object-fit:cover;object-position:26% 48%;
  }
}

/* Card 2: a transparent rear cutout extends beyond the outer card, without an
   internal rectangular photo edge. Its transparent margin separates the type. */
@media screen{
  [data-intro-slide="1"] .intro-product{background:var(--intro-neutral)}
  [data-intro-slide="1"] :is(.intro-product,.intro-polestar-side)::before,
  [data-intro-slide="1"] :is(.intro-product,.intro-polestar-side)::after{
    content:none;background:none;box-shadow:none;
  }
  [data-intro-slide="1"] .intro-visual{background:var(--intro-neutral);--intro-copy-space:calc(4em + 40px)}
  html[lang="en"] [data-intro-slide="1"] .intro-visual{--intro-copy-space:calc(5.8em + 40px)}
  [data-intro-slide="1"] .intro-polestar-side{background:#000}
  [data-intro-slide="1"] .intro-polestar-side::after{content:none}
  [data-intro-slide="1"] .intro-polestar-side img{left:auto;right:0;width:200%;object-fit:contain;object-position:100% 50%;filter:brightness(1.55)}
  [data-intro-slide="1"] .intro-polestar-detail{
    inset:0 auto 0 var(--intro-copy-space);width:100%;height:100%;overflow:visible;
  }
  [data-intro-slide="1"] .intro-polestar-detail img{width:100%;object-fit:cover;object-position:0% 35%}
  [data-intro-slide="1"] .intro-polestar-detail::after{content:none}
  .app-surface [data-intro-slide="1"] .intro-product .motion-phrase>span{color:#fafafa}
  .app-surface [data-intro-slide="1"] .intro-visual .motion-phrase>span{color:#25252b}
}
@media screen and (max-width:719px),screen and (max-aspect-ratio:6/5){
  [data-intro-slide="1"] .intro-polestar-side img{width:100%;object-fit:cover;object-position:100% 48%}
  [data-intro-slide="1"] .intro-visual{--intro-copy-space:max(152px,calc(4em + 40px))}
  html[lang="en"] [data-intro-slide="1"] .intro-visual{--intro-copy-space:calc(6.2em + 40px)}
  [data-intro-slide="1"] .intro-polestar-detail{
    inset:0 auto 0 var(--intro-copy-space);width:100%;height:100%;
  }
  [data-intro-slide="1"] .intro-polestar-detail img{width:100%;object-position:0% 35%}
}

@media screen{
  .intro-video-retry{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:22px;background:#2b2b30;color:#fff;font:inherit;font-size:12px;cursor:pointer}
  .intro-video-retry svg{width:14px;height:14px;fill:currentColor}
  .intro-video-retry[hidden]{display:none}
  .intro-video-retry:focus-visible{outline:2px solid #777781;outline-offset:3px}
}