/* The carousel scene, loaded inside its shadow root. The page's policy blocks inline <style>
   elements, so these rules live in a file; the page links it too, which warms the cache and
   carries the build version. Palette and type are the Nexsign template's. */
:host { font-size: 16px; line-height: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
* { box-sizing: border-box; }

.vertical-carousel { background: #151515; color: #fef9ed; font-family: 'Instrument Sans', Inter, system-ui, sans-serif; }

/* The glow behind the reel: the device in front, blurred into light. */
.vc-bg { position: absolute; inset: -90px; z-index: 0; will-change: opacity; background-position: center 46%; background-repeat: no-repeat; background-size: cover; filter: blur(80px) brightness(.3); }
.vc-bg[data-cutout="1"] { background-size: auto 62%; filter: blur(90px) saturate(1.4) brightness(.62); }

/* Cards. A cut-out floats on a lit card; source photos keep their full frame. */
.vc-card { display: block; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; background: #1a1a1a; border-radius: 24px; }
.vc-card[data-cutout="1"] { background: radial-gradient(95% 72% at 50% 40%, #2d2c29 0%, #1e1e1c 56%, #171716 100%); box-shadow: inset 0 0 0 1px rgba(254, 249, 237, .09); }
.vc-card[data-cutout="0"] { background: radial-gradient(95% 72% at 50% 40%, #353533 0%, #242421 58%, #191918 100%); box-shadow: inset 0 0 0 1px rgba(254, 249, 237, .1); }
.vc-img { position: absolute; inset: 0; will-change: transform; }
.vc-card[data-cutout="1"] .vc-img { inset: 12% 12% 18%; }
.vc-card[data-cutout="0"] .vc-img { inset: 13% 6% 21%; }
.vc-float { position: absolute; inset: 0; }
.vc-card[data-cutout="1"] .vc-float { animation: vc-float 6s ease-in-out infinite alternate; }
.is-reduced .vc-float { animation: none !important; }
@keyframes vc-float { from { transform: translateY(-1.6%); } to { transform: translateY(1.6%); } }
.vc-pic { position: absolute; inset: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
.vc-card[data-cutout="1"] .vc-pic { background-size: contain; filter: drop-shadow(0 20px 24px rgba(0, 0, 0, .5)); }
.vc-card[data-cutout="0"] .vc-pic { background-size: contain; filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .4)); }
/* Only a cut-out rolls; a full photo turning would show its corners. */
.vc-card[data-cutout="0"] .vc-pic { transform: none !important; }
.vc-floor { display: none; position: absolute; left: 20%; right: 20%; bottom: 11%; height: 10%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); }
.vc-card[data-cutout="1"] .vc-floor { display: block; }

/* Titles beside the reel: maker and name on the left, price and stock on the right. */
.vc-side { position: absolute; top: 50%; z-index: 20; transform: translateY(-50%); pointer-events: none; color: #fef9ed; }
.vc-left { left: max(5%, 36px); width: calc(50% - var(--card-w) / 2 - max(5%, 36px) - 28px); }
.vc-right { right: max(5%, 36px); width: calc(50% - var(--card-w) / 2 - max(5%, 36px) - 28px); text-align: right; }
.vc-title { margin: 0; font: 700 clamp(38px, 5vw, 88px)/.9 'News Cycle', Impact, 'Arial Narrow', sans-serif; letter-spacing: -.035em; text-transform: uppercase; overflow-wrap: anywhere; }
.vc-right .vc-title { font-size: clamp(34px, 4.2vw, 72px); }
/* Each word is a mask; each letter rolls through it on its own delay. */
.vc-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; white-space: nowrap; }
.vc-l { display: inline-block; --t: min(1, max(0, calc(var(--p) * 2.3 - var(--i) * .03)));
  transform: translateY(calc(var(--dir) * var(--t) * 112%)); opacity: calc(1 - var(--t)); will-change: transform; }
.is-reduced .vc-l { transform: none; opacity: calc(1 - min(1, var(--p) * 2)); }
.vc-label { margin: 0 0 16px; font: 600 12px/1.3 'Inter Display', Inter, sans-serif; letter-spacing: -.01em; text-transform: uppercase; color: rgba(254, 249, 237, .55); opacity: calc(1 - min(1, var(--p) * 2.4)); }
.vc-right .vc-label { margin: 16px 0 0; }
.vc-status::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px; border-radius: 50%; background: var(--dot, #7fe3a0); box-shadow: 0 0 10px var(--dot, #7fe3a0); }
.vc-status[data-status="soldout"] { --dot: #ff7a66; }
.vc-status[data-status="preorder"], .vc-status[data-status="crowdfunding"] { --dot: #fbe154; }
.vc-status[data-status="development"], .vc-status[data-status="concept"], .vc-status[data-status="unknown"] { --dot: rgba(254, 249, 237, .45); }
.vc-status:empty { display: none; }

/* Phones and narrow tablets: beside a 360px card the columns get too narrow for display
   type (a long word would break mid-letter below ~900px), so the name sits on the card's floor. */
.vc-caption { display: none; position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 20px; flex-direction: column; gap: 7px; pointer-events: none; }
.vc-card[data-cutout="0"] .vc-caption { background: linear-gradient(to top, rgba(0, 0, 0, .82), transparent); padding-top: 60px; }
.vc-cap-name { margin: 0; font: 700 28px/.92 'News Cycle', Impact, 'Arial Narrow', sans-serif; letter-spacing: -.03em; text-transform: uppercase; }
.vc-cap-meta { margin: 0; font: 600 11px/1.2 'Inter Display', Inter, sans-serif; letter-spacing: -.01em; text-transform: uppercase; color: rgba(254, 249, 237, .62); opacity: calc(1 - min(1, var(--p) * 2.4)); }
@media (max-width: 900px) {
  .vc-side { display: none; }
  .vc-caption { display: flex; }
  .vc-card[data-cutout="1"] .vc-img { inset: 9% 11% 27%; }
  .vc-card[data-cutout="1"] .vc-floor { bottom: 24%; }
}

/* The T-Deck Plus's live 3D model (hardware-carousel.js): over the still, fading in once
   ready, turning on its own. The antenna whip fades out upward as it does on every page. */
.vc-live { position: absolute; inset: -6% -10% -4%; pointer-events: none; }
.vc-live canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 700ms ease; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%); }
.vc-card.is-live-model .vc-live canvas { opacity: 1; }
.vc-card.is-live-model .vc-pic { opacity: 0; transition: opacity 500ms ease; }