:root{--space-3xs: clamp(.25rem, .24rem + .06vw, .3125rem);--space-2xs: clamp(.5rem, .48rem + .12vw, .625rem);--space-xs: clamp(.75rem, .72rem + .18vw, .9375rem);--space-s: clamp(1rem, .95rem + .24vw, 1.25rem);--space-m: clamp(1.5rem, 1.43rem + .37vw, 1.875rem);--space-l: clamp(2rem, 1.9rem + .49vw, 2.5rem);--space-xl: clamp(3rem, 2.85rem + .73vw, 3.75rem);--space-2xl: clamp(4rem, 3.8rem + .98vw, 5rem);--space-3xl: clamp(6rem, 5.71rem + 1.46vw, 7.5rem);--text-xs: clamp(.75rem, .7rem + .25vw, .875rem);--text-sm: clamp(.875rem, .8rem + .37vw, 1rem);--text-base: clamp(1rem, .95rem + .25vw, 1.125rem);--text-lg: clamp(1.125rem, 1rem + .62vw, 1.25rem);--text-xl: clamp(1.25rem, 1.1rem + .75vw, 1.5rem);--text-2xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);--text-3xl: clamp(1.875rem, 1.6rem + 1.37vw, 2.25rem);--text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem);--text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);--story-bg: #0a0a0a;--story-surface: rgba(18, 18, 18, .8);--story-glass: rgba(255, 255, 255, .04);--story-glass-hover: rgba(255, 255, 255, .08);--story-border: rgba(255, 255, 255, .08);--story-border-hover: rgba(255, 255, 255, .16);--story-text: rgba(255, 255, 255, .95);--story-text-dim: rgba(255, 255, 255, .7);--story-text-dimmer: rgba(255, 255, 255, .5);--story-accent: #ff3333;--story-accent-glow: #ff333350;--story-gradient: linear-gradient(135deg, #ff3333, #ff6666);--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-in-out-expo: cubic-bezier(.87, 0, .13, 1);--spring: cubic-bezier(.43, .195, .02, 1.4)}.story-wrap{position:relative;width:100%;padding:var(--space-m) 0;background:transparent;overflow:hidden;z-index:1}.glass{background:var(--story-glass);border:1px solid var(--story-border);border-radius:24px;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:0 0 0 1px #ffffff08 inset,0 20px 40px -20px #000c,0 0 80px -20px var(--story-accent-glow);transition:all .6s var(--ease-out-expo)}.glass:hover{background:var(--story-glass-hover);border-color:var(--story-border-hover);transform:translateY(-2px);box-shadow:0 0 0 1px #ffffff14 inset,0 30px 60px -30px #000000e6,0 0 120px -20px var(--story-accent-glow)}.story-container{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--space-m)}.story-container--narrow{max-width:900px}.story-container--wide{max-width:1600px}.bento-grid{display:grid;gap:var(--space-m);grid-auto-flow:dense}.bento-grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr))}.bento-grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}.bento-grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}.bento-item{position:relative;aspect-ratio:1;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--space-m);overflow:hidden}.bento-item--wide{grid-column:span 2;aspect-ratio:2/1}.bento-item--tall{grid-row:span 2;aspect-ratio:1/2}.bento-item--hero{grid-column:span 2;grid-row:span 2;aspect-ratio:1}.button--2025{position:relative;padding:var(--space-xs) var(--space-l);font-size:var(--text-base);font-weight:600;letter-spacing:-.02em;border:none;border-radius:100px;cursor:pointer;overflow:hidden;transition:all .3s var(--ease-out-expo);white-space:nowrap}.button--2025:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translate(-100%);transition:transform .6s}.button--2025:hover:before{transform:translate(100%)}.button--primary-2025{background:var(--story-gradient);color:#fff;box-shadow:0 4px 14px 0 var(--story-accent-glow),0 0 0 1px #ffffff1a inset}.button--primary-2025:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 20px 0 var(--story-accent-glow),0 0 0 1px #fff3 inset}.button--ghost-2025{background:transparent;color:var(--story-text);border:1px solid var(--story-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.button--ghost-2025:hover{background:var(--story-glass-hover);border-color:var(--story-border-hover);transform:translateY(-1px)}.gradient-text{background:linear-gradient(90deg,#f33,#f66,#f99,#f66,#f33);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradient-shift 3s ease infinite}@keyframes gradient-shift{to{background-position:200% center}}.noise-overlay{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.03;mix-blend-mode:overlay;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E")}.glow-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.3;pointer-events:none;animation:float 20s ease-in-out infinite}.glow-orb--red{width:600px;height:600px;background:radial-gradient(circle,var(--story-accent),transparent)}.glow-orb--white{width:400px;height:400px;background:radial-gradient(circle,rgba(255,255,255,.1),transparent)}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}.reveal{opacity:0;transform:translateY(30px);transition:all .8s var(--ease-out-expo)}.reveal.active{opacity:1;transform:translateY(0)}.reveal-scale{opacity:0;transform:scale(.9);transition:all .8s var(--ease-out-expo)}.reveal-scale.active{opacity:1;transform:scale(1)}@media (max-width: 768px){.bento-item--wide,.bento-item--hero{grid-column:span 1}.bento-item--tall,.bento-item--hero{grid-row:span 1;aspect-ratio:1}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}*:focus-visible{outline:2px solid var(--story-accent);outline-offset:4px;border-radius:4px}@media (prefers-contrast: high){.glass{background:var(--story-surface);border-width:2px}.story-text-dim{opacity:1}}
/*# sourceMappingURL=/cdn/shop/t/36/assets/story-page-2025.css.map */