/* VapeKiss – front-page effects and dark graphite home theme.
 * All motion is disabled under prefers-reduced-motion (see bottom). */

/* Hero light effects ------------------------------------------------------- */
.gw-hero { --gw-mx: 70%; --gw-my: 45%; }
.gw-hero__glow { position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; z-index: -1; pointer-events: none;
	background: conic-gradient(from 180deg at 50% 50%, rgba(159,211,255,0) 0deg, rgba(159,211,255,.16) 70deg, rgba(220,226,232,.10) 140deg, rgba(159,211,255,0) 220deg, rgba(159,211,255,.12) 300deg, rgba(159,211,255,0) 360deg);
	filter: blur(60px); border-radius: 50%; animation: gw-spin 28s linear infinite; }
.gw-hero__spot { position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(420px circle at var(--gw-mx) var(--gw-my), rgba(255,255,255,.07), transparent 60%); transition: background .1s; }
.gw-hero--light .gw-hero__glow { opacity: .6; }
.gw-hero--light .gw-hero__spot { background: radial-gradient(420px circle at var(--gw-mx) var(--gw-my), rgba(17,24,39,.05), transparent 60%); }

.gw-hero__stage { perspective: 900px; --gw-rx: 0deg; --gw-ry: 0deg; }
.gw-hero__device, .gw-hero__img { transform: rotateX(var(--gw-rx)) rotateY(var(--gw-ry)); transition: transform .25s ease-out; animation: gw-float 6s ease-in-out infinite; }
/* --gw-rx/--gw-ry are set on the stage and inherited by the image. */
.gw-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(159,211,255,.22); pointer-events: none; }
.gw-ring--1 { transform: scale(.92); border-style: dashed; animation: gw-spin 40s linear infinite; }
.gw-ring--2 { transform: scale(.66); border-color: rgba(255,255,255,.1); animation: gw-spin 26s linear infinite reverse; }
.gw-ring--1::after { content: ""; position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #9fd3ff; box-shadow: 0 0 12px 2px rgba(159,211,255,.7); }
.gw-scan { position: absolute; left: 15%; right: 15%; height: 2px; top: 20%; pointer-events: none; border-radius: 2px;
	background: linear-gradient(90deg, transparent, rgba(159,211,255,.8), transparent); box-shadow: 0 0 18px rgba(159,211,255,.6); animation: gw-scan 4.5s ease-in-out infinite; opacity: .7; }
.gw-hero--light .gw-ring { border-color: rgba(17,24,39,.14); }

/* Hero title shimmer (dark only) */
.gw-hero--dark .gw-hero__title { background: linear-gradient(100deg, #ffffff 0%, #ffffff 40%, #9fd3ff 50%, #ffffff 60%, #b8c0c9 100%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gw-shimmer 7s ease-in-out infinite; }

/* Stats --------------------------------------------------------------------- */
.gw-stats { display: flex; flex-wrap: wrap; gap: clamp(1.25rem, 4vw, 2.75rem); margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.12); }
.gw-hero--light .gw-stats { border-top-color: var(--gw-border); }
.gw-stats__item { display: flex; flex-direction: column-reverse; }
.gw-stats dt { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #9aa3ad; margin-top: .2rem; }
.gw-stats dd { margin: 0; font-family: var(--gw-mono); font-variant-numeric: tabular-nums; }
.gw-stats__num { font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; }
.gw-hero--dark .gw-stats__num { color: #ffffff; }
.gw-stats__unit { font-size: 1rem; margin-left: .2rem; color: #9fd3ff; font-weight: 600; }
.gw-hero--light .gw-stats__unit { color: var(--gw-link); }

/* CTA glow */
.gw-hero--dark .gw-button--primary { position: relative; box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 10px 30px -8px rgba(159,211,255,.55); transition: box-shadow .2s, transform .2s; }
.gw-hero--dark .gw-button--primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.4), 0 16px 40px -8px rgba(159,211,255,.75); }
.gw-hero--dark .gw-button--primary .gw-icon { transition: transform .2s; }
.gw-hero--dark .gw-button--primary:hover .gw-icon { transform: translateX(3px); }

/* Dark graphite: front-page extras (site-wide scheme is in dark.css) ------------------------------------------------ */
.gw-dark { background: #0f1215; color: #e6e9ec; }
.gw-dark .gw-header { background: rgba(15,18,21,.78); border-bottom-color: rgba(255,255,255,.08); }
.gw-dark .gw-wordmark, .gw-dark .gw-nav a, .gw-dark .gw-header-account, .gw-dark .gw-header-cart, .gw-dark .gw-menu-toggle, .gw-dark .gw-header-search button { color: #e6e9ec; }
.gw-dark .gw-nav a:hover, .gw-dark .gw-nav .current-menu-item > a, .gw-dark .gw-header-account:hover, .gw-dark .gw-header-cart:hover { background: rgba(255,255,255,.08); color: #ffffff; }
.gw-dark .gw-header-search { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.gw-dark .gw-header-search input { color: #e6e9ec; }
.gw-dark .gw-header-search input::placeholder { color: #9aa3ad; }
.gw-dark .gw-menu-toggle { border-color: rgba(255,255,255,.2); }
.gw-dark .gw-header-cart__count { background: #9fd3ff; color: #0f1215; }
.gw-dark .gw-nav .sub-menu { background: #181c21; border-color: rgba(255,255,255,.1); }

.gw-dark .gw-link-arrow, .gw-dark .gw-split__text a:not(.gw-button), .gw-dark .gw-details__body a, .gw-dark .gw-content a { color: #9fd3ff; }
.gw-dark .gw-section { position: relative; }
.gw-dark .gw-section--tint { background: #13171b; color: #e6e9ec; border-block: 1px solid rgba(255,255,255,.06); }
.gw-dark .gw-section__title::before { background: linear-gradient(90deg, #9fd3ff, rgba(159,211,255,0)); width: 56px; }
.gw-dark .gw-button:not(.gw-button--primary) { color: #e6e9ec; border-color: rgba(255,255,255,.3); }
.gw-dark .gw-button:not(.gw-button--primary):hover { background: #ffffff; color: #0f1215; }

/* Product cards: glass panels with gradient border */
.gw-dark ul.products li.product { background: linear-gradient(180deg, #1a1f25, #14181c); border-color: rgba(255,255,255,.08); color: #e6e9ec; }
.gw-dark ul.products li.product::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .25s;
	background: linear-gradient(140deg, rgba(159,211,255,.7), rgba(255,255,255,.05) 40%, rgba(159,211,255,.4));
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.gw-dark ul.products li.product:hover { border-color: transparent; box-shadow: 0 20px 50px -10px rgba(0,0,0,.6), 0 0 40px -12px rgba(159,211,255,.35); }
.gw-dark ul.products li.product:hover::before { opacity: 1; }
.gw-dark ul.products li.product img { background: radial-gradient(circle at 50% 40%, #2c343d 0%, #1a1f25 55%, #121518 100%); border-bottom-color: rgba(255,255,255,.06); }
.gw-dark ul.products li.product .woocommerce-loop-product__title,
.gw-dark ul.products li.product .price { color: #ffffff; }
.gw-dark ul.products li.product .price del { color: #9aa3ad; }
.gw-dark .gw-card-specs { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); }
.gw-dark .gw-card-specs dt { color: #9aa3ad; }
.gw-dark ul.products li.product .button { background: #f1f3f5; color: #0f1215; border-color: #f1f3f5; }
.gw-dark ul.products li.product .button:hover { background: #ffffff; color: #0f1215; filter: none; }
.gw-dark .woocommerce span.onsale { background: #9fd3ff; color: #0f1215; }
.gw-dark .gw-badge--in { background: rgba(74,222,128,.1); color: #86efac; }
.gw-dark .gw-badge--out { background: rgba(248,113,113,.1); color: #fca5a5; }
.gw-dark .gw-badge--backorder { background: rgba(251,191,36,.1); color: #fcd34d; }

/* About, FAQ */
.gw-dark .gw-split__media img, .gw-dark .gw-placeholder img { filter: grayscale(.2) brightness(.9); border: 1px solid rgba(255,255,255,.08); }
.gw-dark .gw-details { background: #181c21; border-color: rgba(255,255,255,.08); color: #e6e9ec; }
.gw-dark .gw-details[open] { border-color: rgba(159,211,255,.35); }
.gw-dark .gw-details summary::after { color: #9fd3ff; }
.gw-dark .gw-notice { background: #181c21; color: #e6e9ec; }
.gw-dark .gw-highlights { background: #0b0d10; }
.gw-dark :focus-visible { box-shadow: 0 0 0 2px #0f1215, 0 0 0 4px #9fd3ff; }

/* Scroll reveal (only when JS adds .gw-fx) -------------------------------- */
.gw-fx .gw-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: var(--gw-delay, 0ms); }
.gw-fx .gw-reveal.is-in { opacity: 1; transform: none; }

/* Keyframes ---------------------------------------------------------------- */
@keyframes gw-spin { to { rotate: 360deg; } }
@keyframes gw-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes gw-scan { 0%, 100% { top: 18%; opacity: 0; } 15% { opacity: .8; } 50% { top: 78%; opacity: .8; } 65% { opacity: 0; } }
@keyframes gw-shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }

@media (prefers-reduced-motion: reduce) {
	.gw-hero__glow, .gw-ring, .gw-scan, .gw-hero__device, .gw-hero__img, .gw-hero--dark .gw-hero__title { animation: none !important; }
	.gw-scan { display: none; }
	.gw-fx .gw-reveal { opacity: 1; transform: none; }
}