/* AFTER Store v2 — interaction + experience polish */
:root{--after-orange:#ff5a00;--after-orange-2:#ff7a00;--after-gold:#ffb21a;--after-night:#050505}

/* More alive overall without breaking layout */
.hero,.catalogSection,.experienceSection,.story,.tracking{position:relative}
.primary,.secondary,.cartbtn,.navItem,.product,.experienceSection article,.storyVisual{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease,filter .28s ease}
.primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(255,86,0,.28)}
.secondary:hover,.cartbtn:hover{transform:translateY(-2px);border-color:#ff7a00;box-shadow:0 0 0 1px rgba(255,122,0,.12),0 12px 28px rgba(0,0,0,.35)}
.product:hover{transform:translateY(-7px) scale(1.012);border-color:rgba(255,103,0,.75);box-shadow:0 20px 42px rgba(0,0,0,.38),0 0 0 1px rgba(255,103,0,.08)}
.product:hover .plus{background:var(--after-orange);color:#fff;box-shadow:0 0 18px rgba(255,90,0,.35)}

/* Experience strip: no longer flat black */
.experienceSection{isolation:isolate;overflow:hidden;border-top:1px solid rgba(255,96,0,.12);border-bottom:1px solid rgba(255,96,0,.1);background:
radial-gradient(circle at 8% 45%,rgba(255,86,0,.12),transparent 27%),
radial-gradient(circle at 92% 35%,rgba(255,174,26,.08),transparent 25%),
linear-gradient(180deg,rgba(16,9,5,.72),rgba(3,3,3,.96));
}
.experienceSection:before{content:'';position:absolute;inset:-45% -10%;z-index:-2;background:repeating-linear-gradient(165deg,transparent 0 42px,rgba(255,82,0,.055) 43px 44px,transparent 45px 84px);transform:translateX(-7%);animation:afterLines 12s linear infinite}
.experienceSection:after{content:'';position:absolute;z-index:-1;width:420px;height:420px;border-radius:50%;right:8%;top:-255px;border:2px solid rgba(255,92,0,.25);box-shadow:0 0 70px rgba(255,92,0,.15),inset 0 0 38px rgba(255,92,0,.08);animation:afterOrbit 8s ease-in-out infinite alternate}
.experienceSection article{position:relative;overflow:hidden;min-height:112px;background:linear-gradient(180deg,rgba(255,255,255,.018),rgba(255,255,255,0));}
.experienceSection article:before{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--after-orange),var(--after-gold));transition:transform .28s ease}
.experienceSection article:hover{transform:translateY(-5px);background:linear-gradient(180deg,rgba(255,98,0,.08),rgba(255,255,255,.012));}
.experienceSection article:hover:before{transform:scaleX(1)}
.experienceSection article:hover .benefitIcon{transform:rotate(-4deg) scale(1.08);box-shadow:0 0 30px rgba(255,90,0,.2),inset 0 0 25px rgba(255,90,0,.09)}
.benefitIcon{transition:transform .28s ease,box-shadow .28s ease;background:radial-gradient(circle at 35% 28%,rgba(255,166,0,.18),rgba(255,90,0,.06) 48%,transparent 72%)}
.experienceSection h3{letter-spacing:.03em}.experienceSection p{color:#d0d0d2}

/* ADN / story section — richer, cinematic, interactive */
.story{overflow:hidden;isolation:isolate;border:1px solid rgba(255,255,255,.055);border-radius:32px;margin-top:54px;margin-bottom:40px;padding:82px 64px;background:
radial-gradient(circle at 82% 52%,rgba(255,78,0,.20),transparent 28%),
radial-gradient(circle at 73% 58%,rgba(255,177,26,.07),transparent 18%),
linear-gradient(135deg,#080808 0%,#100803 48%,#040404 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 30px 80px rgba(0,0,0,.32)}
.story:before{content:'';position:absolute;z-index:-2;inset:0;background:repeating-linear-gradient(160deg,transparent 0 52px,rgba(255,88,0,.055) 53px 54px,transparent 55px 104px);animation:storyFlow 18s linear infinite}
.story:after{content:'';position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;right:-100px;top:50%;transform:translateY(-50%);border:4px solid transparent;border-top-color:rgba(255,91,0,.78);border-right-color:rgba(255,176,26,.48);filter:drop-shadow(0 0 22px rgba(255,88,0,.34));animation:storyMoon 9s ease-in-out infinite alternate}
.storyText{position:relative;z-index:3}.storyText .kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid rgba(255,94,0,.28);border-radius:999px;background:rgba(255,88,0,.045);box-shadow:inset 0 0 18px rgba(255,88,0,.025)}
.story h2{max-width:680px;text-wrap:balance}.storyText>p:not(.kicker){font-size:15px;max-width:660px;color:#d1d1d4}
.quote{position:relative;overflow:hidden;padding:22px 24px;margin-top:28px;border:1px solid rgba(255,102,0,.17);border-radius:16px;background:linear-gradient(90deg,rgba(255,88,0,.075),rgba(255,255,255,.015));font-size:19px}
.quote:before{content:'⚡';position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:42px;color:rgba(255,92,0,.16)}
.storyVisual{position:relative;z-index:3;min-height:390px;border-color:rgba(255,94,0,.34);background:radial-gradient(circle at 50% 45%,rgba(255,90,0,.22),transparent 28%),linear-gradient(145deg,#101010,#060606);box-shadow:0 22px 55px rgba(0,0,0,.42),0 0 45px rgba(255,76,0,.07);overflow:hidden}
.storyVisual:before{content:'';position:absolute;width:290px;height:290px;border-radius:50%;border:4px solid transparent;border-top-color:#ff5a00;border-right-color:#ff9d12;transform:rotate(21deg);filter:drop-shadow(0 0 16px rgba(255,87,0,.48));animation:visualOrbit 7s ease-in-out infinite alternate}
.storyVisual:after{content:'';position:absolute;left:-30%;right:-30%;height:2px;top:64%;background:linear-gradient(90deg,transparent,rgba(255,97,0,.7),transparent);transform:rotate(-15deg);box-shadow:0 0 12px rgba(255,80,0,.35);animation:energySweep 4.5s ease-in-out infinite}
.storyVisual img{position:relative;z-index:2;width:54%;filter:drop-shadow(0 18px 28px rgba(0,0,0,.5));transition:transform .35s ease,filter .35s ease}.storyVisual:hover img{transform:scale(1.06) rotate(-1deg);filter:drop-shadow(0 18px 35px rgba(0,0,0,.55)) drop-shadow(0 0 16px rgba(255,88,0,.18))}

/* Tracking becomes a premium interaction block */
.tracking{margin-top:24px;margin-bottom:60px;border-radius:26px;background:linear-gradient(135deg,rgba(255,89,0,.055),rgba(255,255,255,.012) 42%,rgba(255,255,255,.008));border:1px solid rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.025)}
.tracking input:focus,.sheet input:focus,.sheet select:focus,.sheet textarea:focus{outline:none;border-color:rgba(255,102,0,.85);box-shadow:0 0 0 3px rgba(255,95,0,.10),0 0 24px rgba(255,90,0,.06)}

/* Small lively touches */
.navItem:hover .navIcon{filter:drop-shadow(0 0 7px rgba(255,93,0,.48));transform:translateY(-1px)}.navIcon{transition:transform .2s ease,filter .2s ease}
.crescent{animation:crescentPulse 5s ease-in-out infinite alternate}.heroMark{animation:heroFloat 5.5s ease-in-out infinite}

@keyframes afterLines{to{transform:translateX(7%)}}
@keyframes afterOrbit{from{transform:translateY(-5px) scale(.96)}to{transform:translateY(14px) scale(1.03)}}
@keyframes storyFlow{to{transform:translateX(72px)}}
@keyframes storyMoon{from{transform:translateY(-50%) rotate(4deg) scale(.96)}to{transform:translateY(-50%) rotate(14deg) scale(1.03)}}
@keyframes visualOrbit{from{transform:rotate(15deg) scale(.94)}to{transform:rotate(29deg) scale(1.02)}}
@keyframes energySweep{0%,100%{opacity:.25;transform:translateX(-10%) rotate(-15deg)}50%{opacity:1;transform:translateX(12%) rotate(-15deg)}}
@keyframes crescentPulse{from{filter:drop-shadow(0 0 8px #ff5b00) drop-shadow(0 0 18px rgba(255,88,0,.45))}to{filter:drop-shadow(0 0 14px #ff6a00) drop-shadow(0 0 34px rgba(255,88,0,.72))}}
@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

@media(max-width:680px){
.experienceSection{border-radius:0}.experienceSection article{min-height:96px}.story{margin:28px 14px 32px;padding:52px 20px;border-radius:24px}.story:after{width:340px;height:340px;right:-160px;top:68%}.storyVisual{min-height:300px}.storyVisual:before{width:220px;height:220px}.tracking{margin:12px 14px 42px;padding:48px 18px}.heroMark,.crescent{animation-duration:7s}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}