.upgrade-card{position:relative;perspective:1600px;min-width:0}
.upgrade-link{display:block;min-height:430px;position:relative;outline-offset:7px!important}
.upgrade-turn{position:relative;width:100%;min-height:inherit;display:grid;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.75,.2,1)}
.upgrade-face{position:relative;grid-area:1/1;min-width:0;border:1px solid #8fabbe42;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#111e2b}
.upgrade-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.7) saturate(.8)}
.upgrade-front:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#050e1977,transparent 35%,#050e19ee)}
.upgrade-number{font-size:10px;letter-spacing:2px;font-weight:700;color:#c2d9ee}
.upgrade-front>.upgrade-number{position:absolute;left:30px;top:28px;z-index:1}
.upgrade-front-copy{position:absolute;left:30px;right:30px;bottom:30px;z-index:1}
.upgrade-card h3{font:700 clamp(36px,3.3vw,48px)/1 Barlow;text-transform:uppercase;max-width:430px;color:#f7f9fc}
.upgrade-hint,.upgrade-cta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff38;padding-top:18px;margin-top:24px;font-size:12px;font-weight:700;color:#d0e5f7}
.upgrade-hint span,.upgrade-cta span{font-size:25px;color:#92c8f4}
.upgrade-back{transform:rotateY(180deg);padding:30px;display:flex;flex-direction:column;background:radial-gradient(ellipse at 100% 0,#21659d66,transparent 65%),linear-gradient(140deg,#142e46,#0b1724)}
.upgrade-back:after{content:"";position:absolute;right:-90px;top:-80px;width:250px;height:250px;border:1px solid #92c8f423;border-radius:50%;box-shadow:0 0 0 35px #92c8f409,0 0 0 70px #92c8f407;pointer-events:none}
.upgrade-back h3{margin-top:25px;position:relative}
.upgrade-back p{font-size:14px;line-height:1.8;margin:20px 0;color:#c9d8e6;max-width:480px}
.upgrade-cta{margin-top:auto}


.upgrade-toggle{display:none;position:absolute;top:16px;right:16px;z-index:2;background:#0c1b2bec;border:1px solid #8aaac5;color:#ecf6ff;font-size:11px;padding:9px 12px;gap:8px;align-items:center}
@media(hover:none),(pointer:coarse){.upgrade-toggle{display:flex}.upgrade-front>.upgrade-number{top:70px}.upgrade-back{padding-top:70px}.upgrade-link{min-height:470px}}
@media(max-width:700px){.upgrade-link{min-height:440px}.upgrade-card h3{font-size:39px}.upgrade-front-copy{left:24px;right:24px;bottom:25px}.upgrade-front>.upgrade-number{left:24px}.upgrade-back{padding-inline:24px;padding-bottom:25px}.upgrade-back p{font-size:13px;line-height:1.7}.upgrade-back h3{margin-top:20px}}
@media(prefers-reduced-motion:reduce){.upgrade-turn{transition:none}}


/* Four independent animation studies. A stable outer card owns the hover area. */
.upgrade-card{--reveal:0}
.upgrade-card.is-flipped,.upgrade-card:has(.upgrade-reveal:focus-visible){--reveal:1}
@media(hover:hover) and (pointer:fine){.upgrade-card:hover{--reveal:1}}
.upgrade-card:not([data-effect="flip"]) .upgrade-link{overflow:hidden}
.upgrade-card:not([data-effect="flip"]) .upgrade-turn{transform-style:flat;transition:none}
.upgrade-card:not([data-effect="flip"]) .upgrade-back{transform:none}
.upgrade-card:not([data-effect="flip"]) .upgrade-front{z-index:2}
.upgrade-card .upgrade-back>h3,.upgrade-card .upgrade-back>p{transition:translate .65s cubic-bezier(.2,.75,.2,1),opacity .45s;translate:0 calc((1 - var(--reveal))*16px);opacity:var(--reveal)}
/* 1. The photograph lifts away like a cover; the copy rises from below. */
[data-effect="slide"] .upgrade-front{transform:translateY(calc(var(--reveal)*-102%));transition:transform .85s cubic-bezier(.76,0,.24,1)}
[data-effect="slide"] .upgrade-back{box-shadow:inset 0 12px 35px #0006}
/* 2. Two perfectly matched halves open outwards. */
[data-effect="split"] .upgrade-front:not(.upgrade-shutter){opacity:0;pointer-events:none}
.upgrade-shutter{pointer-events:none;transition:transform .95s cubic-bezier(.76,0,.24,1)}
.shutter-left{clip-path:inset(0 50% 0 0);transform:translateX(calc(var(--reveal)*-52%))}
.shutter-right{clip-path:inset(0 0 0 50%);transform:translateX(calc(var(--reveal)*52%))}
/* 3. A blue circular reveal expands from the upper-right corner. */
[data-effect="circle"] .upgrade-back{z-index:3;clip-path:circle(calc(var(--reveal)*150%) at 100% 0);transition:clip-path 1s cubic-bezier(.65,0,.2,1)}
[data-effect="circle"] .upgrade-front img{transform:scale(calc(1 + var(--reveal)*.07));transition:transform 1s ease}
/* 4. An angled mask sweeps the photo away to uncover the description. */
[data-effect="diagonal"] .upgrade-front{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);transition:clip-path .95s cubic-bezier(.65,0,.2,1)}
[data-effect="diagonal"].is-flipped .upgrade-front,[data-effect="diagonal"]:has(.upgrade-reveal:focus-visible) .upgrade-front{clip-path:polygon(0 0,0 0,0 0,0 35%)}
@media(hover:hover) and (pointer:fine){[data-effect="diagonal"]:hover .upgrade-front{clip-path:polygon(0 0,0 0,0 0,0 35%)}}
[data-effect="diagonal"] .upgrade-back>h3,[data-effect="diagonal"] .upgrade-back>p{translate:calc((1 - var(--reveal))*-24px) 0}
@media(prefers-reduced-motion:reduce){.upgrade-card *{transition:none!important}}
.upgrade-link{isolation:isolate}
/* Category labels stay above the animated faces in every reveal style. */
.upgrade-stationary{position:absolute;top:28px;left:30px;z-index:4;pointer-events:none}
.upgrade-card .upgrade-back{padding-top:47.5px}
@media(hover:none),(pointer:coarse){.upgrade-stationary{top:70px}.upgrade-card .upgrade-back{padding-top:87.5px}}
@media(max-width:700px){.upgrade-stationary{left:24px}}

/* One customer-facing call to action stays fixed above every animated face. */
.upgrade-cta-stationary{position:absolute;left:30px;right:30px;bottom:30px;z-index:4;margin:0}
.upgrade-card .upgrade-front-copy{bottom:108px}
.upgrade-card .upgrade-back{padding-bottom:110px}
@media(max-width:700px){.upgrade-cta-stationary{left:24px;right:24px;bottom:25px}.upgrade-card .upgrade-front-copy{bottom:103px}.upgrade-card .upgrade-back{padding-bottom:105px}}
.upgrade-grid .upgrade-card{display:flex;flex-direction:column}.upgrade-grid .upgrade-link{flex:1;display:grid}
/* 5. A wave-shaped edge rises from the bottom to reveal the marine description. */
[data-effect="wave"] .upgrade-back{z-index:3;clip-path:polygon(0 calc(112% - var(--reveal)*140%),10% calc(108% - var(--reveal)*140%),20% calc(106% - var(--reveal)*140%),30% calc(108% - var(--reveal)*140%),40% calc(113% - var(--reveal)*140%),50% calc(117% - var(--reveal)*140%),60% calc(119% - var(--reveal)*140%),70% calc(117% - var(--reveal)*140%),80% calc(112% - var(--reveal)*140%),90% calc(108% - var(--reveal)*140%),100% calc(106% - var(--reveal)*140%),100% 100%,0 100%);transition:clip-path 1.15s cubic-bezier(.45,0,.2,1)}
[data-effect="wave"] .upgrade-front img{transform:scale(calc(1 + var(--reveal)*.04));transition:transform 1.15s ease}
/* 6. Six angled photo strips accelerate away in a staggered sequence. */
[data-effect="strips"] .upgrade-front:not(.upgrade-strip){opacity:0;pointer-events:none}
.upgrade-strip{pointer-events:none;transform:translateX(calc(var(--reveal)*120%));opacity:calc(1 - var(--reveal));transition:transform .8s cubic-bezier(.65,0,.2,1),opacity .7s ease;transition-delay:var(--strip-delay)}
[data-effect="strips"] .upgrade-back>h3,[data-effect="strips"] .upgrade-back>p{translate:calc((1 - var(--reveal))*-20px) 0}

/* Card surface reveals details; the separate product link navigates. */
.upgrade-reveal{position:absolute;inset:0;z-index:4;width:100%;height:100%;border:0;padding:0;background:transparent;cursor:pointer;border-radius:0}.upgrade-reveal:focus-visible{outline:2px solid #92c8f4;outline-offset:-4px}.upgrade-cta-stationary{z-index:5}.upgrade-toggle{z-index:6}

/* Tap the card itself to reveal details; no separate mobile control. */
@media(hover:none),(pointer:coarse){.upgrade-stationary{top:28px}.upgrade-card .upgrade-back{padding-top:47.5px}}