.fantom-day-night{background-color:var(--fantom-bg);color:var(--fantom-text);padding:clamp(80px,12vw,160px) 0;position:relative;overflow:hidden}.fantom-day-night:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse 40% 40% at 25% 60%,rgba(255,215,0,.08),transparent 70%),radial-gradient(ellipse 40% 40% at 75% 40%,rgba(193,61,255,.12),transparent 70%);z-index:-1;pointer-events:none}.fantom-day-night__container{width:100%;max-width:min(100%,1280px);margin:0 auto;padding:0 var(--fantom-gutter)}.fantom-day-night__header{text-align:center;margin-bottom:clamp(40px,6vw,64px)}.fantom-day-night__subheading{font-family:var(--fantom-font-body);font-size:var(--fantom-fs-body-lg);color:var(--fantom-text-muted);margin:8px 0 0}.fantom-day-night__stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:40px}.fantom-day-night__toggle{position:relative;z-index:3;border:none;background:transparent;padding:0;cursor:pointer}.fantom-day-night__toggle-track{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;width:144px;height:64px;padding:0 16px;background-color:var(--fantom-bg-elevated);border:1px solid rgba(255,255,255,.12);border-radius:var(--fantom-radius-pill);position:relative;box-shadow:inset 0 2px 8px #0006}.fantom-day-night__toggle-icon{position:relative;z-index:2;color:var(--fantom-text-muted);display:inline-flex;transition:color var(--fantom-duration-base) var(--fantom-ease-standard)}.fantom-day-night__toggle-thumb{position:absolute;top:6px;left:6px;width:52px;height:52px;background:radial-gradient(circle at 30% 30%,#ffed4e,gold 60%,#e6b800);border-radius:var(--fantom-radius-pill);box-shadow:0 4px 16px #ffd70080,inset 0 2px 4px #ffffff4d,inset 0 -2px 4px #0003;transition:transform var(--fantom-duration-base) var(--fantom-ease-emphatic);z-index:1}.fantom-day-night__stage[data-state=night] .fantom-day-night__toggle-thumb{transform:translate(80px)}.fantom-day-night__stage[data-state=day] .fantom-day-night__toggle-icon--day,.fantom-day-night__stage[data-state=night] .fantom-day-night__toggle-icon--night{color:var(--fantom-bg)}.fantom-day-night__panels{position:relative;width:100%;max-width:1080px;display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--fantom-radius-card);overflow:hidden;box-shadow:0 40px 80px #0009,0 0 0 1px #ffffff0d}.fantom-day-night__panel{position:relative;aspect-ratio:4 / 5;overflow:hidden;transition:opacity var(--fantom-duration-slow) var(--fantom-ease-standard),filter var(--fantom-duration-slow) var(--fantom-ease-standard)}.fantom-day-night__panel--day{background:linear-gradient(180deg,#8ec5ff,#c3e0ff 60%,#e8f1ff)}.fantom-day-night__panel--night{background:radial-gradient(ellipse at 30% 20%,#1a0f2a,#0a0a0a 70%)}.fantom-day-night__panel-label{position:absolute;top:20px;left:20px;z-index:2;padding:10px 16px;background:#0009;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:var(--fantom-radius-pill);color:var(--fantom-text);font-family:var(--fantom-font-body);font-size:var(--fantom-fs-micro);font-weight:var(--fantom-fw-bold);letter-spacing:var(--fantom-tracking-label);text-transform:uppercase}.fantom-day-night__panel--day .fantom-day-night__panel-label{background:#ffffffd9;color:var(--fantom-text-inv);border-color:#00000014}.fantom-day-night__media{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center}.fantom-day-night__media img{width:100%;height:100%;object-fit:cover}.fantom-day-night__placeholder{width:100%;height:100%;border-radius:0;border:none;background:transparent;color:#fff9}.fantom-day-night__placeholder--holo{background:radial-gradient(circle at 40% 40%,rgba(255,61,158,.2),transparent 40%),radial-gradient(circle at 60% 60%,rgba(61,220,255,.2),transparent 40%)}.fantom-day-night__stage[data-state=day] .fantom-day-night__panel--day{filter:none}.fantom-day-night__stage[data-state=day] .fantom-day-night__panel--night{filter:brightness(.25) saturate(.3);opacity:.7}.fantom-day-night__stage[data-state=night] .fantom-day-night__panel--day{filter:brightness(.2) saturate(.2);opacity:.5}.fantom-day-night__stage[data-state=night] .fantom-day-night__panel--night{filter:none}.fantom-day-night__cta-wrap{display:flex;justify-content:center;margin-top:16px}@media(max-width:749px){.fantom-day-night__panels{grid-template-columns:1fr}.fantom-day-night__panel{aspect-ratio:1 / 1}}@media(prefers-reduced-motion:reduce){.fantom-day-night__toggle-thumb,.fantom-day-night__panel{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/4/assets/fantom-day-night.css.map */