/* TRYNLOOK website: motion + interactive layer. Everything here is optional; with "reduce motion" on, it all switches off. */

#progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:80;background:linear-gradient(90deg,#b98d55,#f3d8bb,#eac194);box-shadow:0 0 12px rgba(234,193,148,.7);pointer-events:none}

/* ---------- hero: slow zoom, intro, floating phone, glow that follows the mouse ---------- */
.hero-bg{animation:kb 26s ease-in-out infinite alternate;transform:translate3d(0,calc(var(--py,0)*1px),0) scale(1.02)}
@keyframes kb{from{scale:1}to{scale:1.07}}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(420px 420px at var(--gx,60%) var(--gy,40%),rgba(255,220,170,.17),transparent 70%);transition:background-position .2s}
.hero-copy>*{opacity:0;transform:translateY(26px);animation:rise .95s cubic-bezier(.2,.8,.2,1) forwards}
.hero-copy h1{animation-delay:.15s}.hero-copy .lead{animation-delay:.45s}.hero-copy>.btn{animation-delay:.6s}.hero-copy .stores{animation-delay:.75s}.hero-copy .quote{animation-delay:.95s}
@keyframes rise{to{opacity:1;transform:none}}
.hero h1 em{background-size:240% 100%;background-image:linear-gradient(100deg,#c99a61 0%,#f6dcae 35%,#c99a61 55%,#e7c697 100%);animation:sheen 6s linear infinite}
@keyframes sheen{from{background-position:0% 0}to{background-position:-240% 0}}
.hero-phone{opacity:0;animation:phoneIn 1.4s .5s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes phoneIn{from{opacity:0;transform:translate3d(60px,40px,0)}to{opacity:1;transform:none}}
.phone.tilt{transform:rotateY(calc(-18deg + var(--ry,0deg))) rotateZ(10deg) rotateX(calc(3deg + var(--rx,0deg)));transition:transform .25s ease-out;animation:bob 7s ease-in-out infinite}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -14px}}
.fcard{animation:bob2 6s ease-in-out infinite;transition:transform .3s}
.fcard.c1{animation-duration:5.6s}.fcard.c2{animation-duration:6.8s;animation-delay:-2.4s}
@keyframes bob2{0%,100%{translate:0 0}50%{translate:0 -12px}}
.hero-phone .screen{position:relative}
.hero-phone .screen img{position:absolute;inset:0;transition:opacity .9s ease}
.hero-phone .screen img+img{opacity:0}
.hero-phone .screen.alt img:first-child{opacity:0}.hero-phone .screen.alt img+img{opacity:1}
.scanline{position:absolute;left:0;right:0;top:-12%;height:12%;background:linear-gradient(180deg,transparent,rgba(243,216,187,.55),transparent);pointer-events:none;opacity:0;z-index:3}
.scanline.go{animation:scan 1.1s ease-in-out}
@keyframes scan{0%{top:-12%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.soon .fx-canvas{z-index:0}
.scrollcue{position:absolute;left:50%;bottom:22px;z-index:3;width:26px;height:44px;margin-left:-13px;border:1.5px solid rgba(243,216,187,.7);border-radius:20px;opacity:0;animation:rise 1s 1.6s forwards}
.scrollcue::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#f3d8bb;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}80%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;will-change:transform}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);pointer-events:none}
.btn:hover::after{transform:translateX(120%);transition:transform .8s}
.btn.gold:not(.sm){animation:glow 3.2s ease-in-out infinite}
@keyframes glow{0%,100%{box-shadow:0 10px 28px rgba(212,175,124,.25)}50%{box-shadow:0 10px 40px rgba(234,193,148,.55)}}
.btn .ic{transition:transform .25s}.btn:hover .ic{transform:translateX(4px)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rip .7s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}
.store{position:relative}.store:hover .ic{transform:scale(1.1)}.store .ic{transition:transform .25s}

/* ---------- section reveals ---------- */
.rv{transition-delay:calc(var(--i,0)*90ms)}
.strip .f.rv .ring{transform:scale(.6);opacity:0;transition:transform .7s calc(var(--i,0)*90ms + .1s) cubic-bezier(.3,1.6,.5,1),opacity .5s calc(var(--i,0)*90ms)}
.strip .f.in .ring{transform:none;opacity:1}
.strip .f{transition:transform .3s}
.strip .f:hover .ring{background:var(--goldgrad);color:#14100b;border-color:transparent;transform:translateY(-6px) rotate(8deg);box-shadow:0 14px 26px rgba(185,141,85,.35)}
.strip .f .ring{transition:transform .35s,background .35s,color .35s,box-shadow .35s}
.ring svg{transition:transform .5s}
.strip .f:hover .ring svg{transform:scale(1.12) rotate(-8deg)}

/* heading shimmer line */
h2.line-draw{position:relative;display:inline-block}
h2.line-draw::after{content:"";display:block;height:2px;margin:14px auto 0;width:0;background:linear-gradient(90deg,transparent,#d4af7c,transparent);transition:width 1s .3s cubic-bezier(.2,.8,.2,1)}
h2.line-draw.in::after{width:120px}
.explore h2.line-draw::after{margin-left:0;background:linear-gradient(90deg,#d4af7c,transparent)}

/* sparkles (decor) */
.tw{position:absolute;width:var(--s,18px);height:var(--s,18px);pointer-events:none;color:#d4af7c;opacity:.0;animation:twinkle var(--d,3.4s) ease-in-out infinite;animation-delay:var(--dl,0s);z-index:2}
.tw svg{width:100%;height:100%;fill:currentColor}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(35deg)}}
.real,.how,.soon,.explore{position:relative}

/* ---------- explore carousel ---------- */
.car{cursor:grab;scroll-snap-type:none}
.car.drag{cursor:grabbing}
.car figure{position:relative;transform-style:preserve-3d;transition:transform .2s ease-out,box-shadow .3s;will-change:transform}
.car figure:hover{box-shadow:0 22px 50px rgba(0,0,0,.55),0 0 0 1px rgba(234,193,148,.7)}
.car figure::after{content:attr(data-name);position:absolute;left:0;right:0;bottom:0;padding:30px 12px 11px;font:600 12px var(--sans);letter-spacing:.02em;color:#fff;background:linear-gradient(transparent,rgba(11,11,11,.85));transform:translateY(100%);transition:transform .3s;pointer-events:none}
.car figure:hover::after{transform:none}
.car figure img{pointer-events:none;user-select:none;-webkit-user-drag:none}
.car-wrap::after{content:"";position:absolute;right:0;top:0;bottom:0;width:70px;background:linear-gradient(90deg,transparent,rgba(11,11,11,.7));pointer-events:none;border-radius:0 14px 14px 0}
.chip{position:relative;overflow:hidden}
.chip.on{box-shadow:0 0 18px rgba(247,237,228,.35)}
.arrow{transition:transform .2s,box-shadow .2s}.arrow:hover{box-shadow:0 0 0 6px rgba(234,193,148,.25)}

/* ---------- see the real you: try-on demo ---------- */
.ba-wrap{display:flex;flex-direction:column;gap:22px}
.ba figure{overflow:hidden}
.ba figure img{transition:transform .8s}
.ba:hover figure img{transform:scale(1.03)}
.ba .afterfig img{position:absolute;inset:0;transition:opacity .6s,transform .8s}
.ba .afterfig img.out{opacity:0}
.ba .afterfig .scan{position:absolute;left:0;right:0;top:-14%;height:14%;background:linear-gradient(180deg,transparent,rgba(212,175,124,.75),transparent);filter:blur(1px);opacity:0;pointer-events:none;z-index:2}
.ba .afterfig .scan.go{animation:scan 1.3s ease-in-out}
.ba .afterfig .tag{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:7px 16px;border-radius:99px;font:600 12px var(--sans);background:rgba(11,11,11,.72);color:#f7ede4;backdrop-filter:blur(6px);white-space:nowrap;z-index:3}
.swap{animation:pulse 2.2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(11,11,11,.35)}50%{box-shadow:0 0 0 12px rgba(11,11,11,0)}}
.picker{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.picker>span{font:600 12.5px var(--sans);color:#6f655b;margin-right:4px}
.picker button{position:relative;width:62px;height:62px;border-radius:50%;overflow:hidden;border:2px solid transparent;background:#e9dccd;box-shadow:0 6px 18px rgba(120,90,60,.18);transition:transform .25s,border-color .25s,box-shadow .25s}
.picker button img{width:100%;height:100%;object-fit:cover}
.picker button:hover{transform:translateY(-4px) scale(1.06)}
.picker button.on{border-color:#0b0b0b;box-shadow:0 0 0 4px rgba(212,175,124,.45),0 10px 22px rgba(120,90,60,.25)}
.flist li{transition:transform .3s}.flist li:hover{transform:translateX(8px)}
.flist li:hover .sq{background:var(--goldgrad);color:#14100b}.sq{transition:background .3s,color .3s,transform .4s}.flist li:hover .sq{transform:rotate(-8deg) scale(1.06)}

/* ---------- how it works ---------- */
.steps{position:relative}
.steps::before{content:"";position:absolute;left:12%;right:12%;top:46px;height:1px;background:rgba(212,175,124,.18)}
.steps::after{content:"";position:absolute;left:12%;top:46px;height:2px;width:calc(76% * var(--p,0));background:linear-gradient(90deg,#b98d55,#f3d8bb);box-shadow:0 0 12px rgba(234,193,148,.8);transition:width .3s linear}
.steps li{position:relative;z-index:1}
.steps .ring{position:relative;transition:transform .5s,box-shadow .5s,background .5s,border-color .5s,color .5s}
.steps li.lit .ring{border-color:#f3d8bb;background:rgba(212,175,124,.12);box-shadow:0 0 0 8px rgba(212,175,124,.08),0 0 34px rgba(212,175,124,.35);transform:scale(1.06)}
.steps li.lit .n{background:var(--goldgrad);animation:pulse2 2s infinite}
@keyframes pulse2{0%,100%{box-shadow:0 0 0 0 rgba(234,193,148,.5)}50%{box-shadow:0 0 0 7px rgba(234,193,148,0)}}
.steps li:hover .ring{transform:translateY(-6px) scale(1.08);box-shadow:0 0 40px rgba(212,175,124,.45)}
.steps .chev{animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

/* ---------- countdown ---------- */
.count div{position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.count div:hover{transform:translateY(-5px);box-shadow:0 16px 30px rgba(120,90,60,.2)}
.count b{display:inline-block}
.count b.flip{animation:flip .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes flip{0%{transform:translateY(-70%) rotateX(80deg);opacity:0}100%{transform:none;opacity:1}}
.soon-phones .phone{animation:bob 8s ease-in-out infinite}
.soon-phones .phone.front{animation-duration:6.4s;animation-delay:-2s}
.screen.splash .tnl{animation:plPulse 3.4s ease-in-out infinite}
@keyframes plPulse{50%{opacity:.75;filter:drop-shadow(0 0 14px rgba(234,193,148,.5))}}

/* faq */
.qa details{transition:background .3s}.qa details[open]{background:rgba(212,175,124,.05)}
.qa details p{animation:fadeIn .5s}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}}
.qa summary:hover{color:#f3d8bb}

/* modal */
.mcard{animation:pop .45s cubic-bezier(.2,1.2,.4,1)}
.done .tick{animation:tick 1s cubic-bezier(.3,1.5,.5,1)}
@keyframes tick{from{transform:scale(0) rotate(-120deg)}to{transform:none}}

/* custom touch of light on desktop */
.cursor-glow{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:70;background:radial-gradient(circle,rgba(234,193,148,.10),transparent 65%);mix-blend-mode:screen;transition:opacity .3s;opacity:0}
body.has-pointer .cursor-glow{opacity:1}

@media (max-width:860px){
  .steps::before,.steps::after{display:none}
  .picker button{width:54px;height:54px}
  .cursor-glow{display:none}
  .scrollcue{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-copy>*,.hero-phone,.scrollcue{opacity:1!important;transform:none!important}
  .tw,.fx-canvas,.cursor-glow,#progress{display:none!important}
}