/* motion + navigation layer */
#curtain{position:fixed;inset:0;background:var(--ink);z-index:120;transform:translateY(100%);pointer-events:none;display:grid;place-items:center;color:#e0b66b;font-family:var(--serif);font-size:1.6rem;letter-spacing:.5em;text-transform:uppercase}
#curtain.in{transform:translateY(0);transition:transform .7s cubic-bezier(.7,0,.2,1)}
#curtain.start{transform:translateY(0)}
#curtain.out{transform:translateY(-100%);transition:transform .8s cubic-bezier(.7,0,.2,1)}
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold2);z-index:60}
header.top{transition:transform .5s,background .3s}
header.top.hide{transform:translateY(-110%)}
#cur{position:fixed;top:0;left:0;width:38px;height:38px;border:1px solid var(--gold2);border-radius:50%;pointer-events:none;z-index:130;transform:translate(-50%,-50%);transition:width .3s,height .3s,background .3s;mix-blend-mode:multiply}
#cur.big{width:74px;height:74px;background:rgba(184,137,63,.18)}
@media(hover:none){#cur{display:none}}
#side{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
#side a{width:18px;height:1.5px;background:var(--ink2);opacity:.5;transition:.4s;display:block}
#side a.on{width:46px;opacity:1;background:var(--gold2)}
@media(max-width:860px){#side{display:none}}
/* hero text choreography */
.scene .eyebrow,.scene p.sub,.scene .btn{opacity:0;transform:translateY(24px);transition:.9s cubic-bezier(.2,.7,.2,1)}
.scene.on .eyebrow{opacity:1;transform:none;transition-delay:.3s}
.scene.on p.sub{opacity:1;transform:none;transition-delay:.9s}
.scene.on .btn{opacity:1;transform:none;transition-delay:1.15s}
.scene h1 .w{display:inline-block;overflow:hidden;vertical-align:top;margin-right:.22em}
.scene h1 .w i{display:inline-block;font-style:normal;transform:translateY(110%);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.scene.on h1 .w i{transform:none}
.hero .halo{position:absolute;width:70vmin;height:70vmin;border-radius:50%;border:1px solid rgba(140,100,37,.35);animation:spin 40s linear infinite;pointer-events:none}
.hero .halo.two{width:92vmin;height:92vmin;animation-direction:reverse;animation-duration:70s;border-style:dashed}
.hero .hint{position:absolute;left:28px;bottom:42px;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2);z-index:5}
.hero .hint:after{content:"";display:inline-block;width:46px;height:1px;background:var(--ink2);vertical-align:middle;margin-left:12px;animation:grow 2s infinite}
@keyframes grow{0%{transform:scaleX(0);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
/* marquee */
.marq{overflow:hidden;white-space:nowrap;padding:22px 0;border-block:1px solid var(--line);background:var(--bg2)}
.marq div{display:inline-block;animation:mq 34s linear infinite;font-family:var(--serif);font-size:1.9rem;letter-spacing:.2em;text-transform:uppercase}
.marq span{margin:0 28px;color:var(--gold)}
@keyframes mq{to{transform:translateX(-50%)}}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}
.card .art svg{will-change:transform}
.numbers span{display:inline-block;min-width:1.7em;text-align:center}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01s!important}}

/* ===== cinematic stage ===== */
.stage{position:relative;height:100vh;min-height:620px;padding:0;overflow:hidden;background:#3b2a18;color:var(--ink);user-select:none;touch-action:pan-y;cursor:grab}
.stage:active{cursor:grabbing}
.stage .bgs{position:absolute;inset:0;transition:transform 1s cubic-bezier(.6,0,.2,1),filter .7s;--px:0px;--py:0px}
.bg{position:absolute;inset:-2%;opacity:0;transition:opacity 1.2s;transform:translate(var(--px),var(--py)) scale(1)}
.bg svg{position:absolute;inset:0;width:100%;height:100%}
.bg .foot{position:absolute;inset:0;background-size:cover;background-position:center}
.bg.on{opacity:1;animation:dolly 14s ease-out forwards}
@keyframes dolly{from{scale:1}to{scale:1.05}}
.stage.tr .bgs{transform:scale(1.28);filter:blur(16px) brightness(.55)}
.stage.tr #gl{opacity:0!important}
.stage #fx,.stage #gl,.stage .vig{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.stage #gl{z-index:3}.stage #fx{z-index:4}
.vig{z-index:2;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(59,42,24,.55)),linear-gradient(transparent 60%,rgba(255,241,221,.55))}
.titles{position:absolute;inset:0;z-index:5;pointer-events:none}
.ti{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;opacity:0;transition:opacity .6s}
.ti.on{opacity:1}
.ti h1{font-size:clamp(3rem,10vw,9rem);letter-spacing:.1em;color:#4a3118}
.ti .ln{display:block;overflow:hidden}.ti .ln i{display:block;font-style:normal;transform:translateY(105%)}
.ti.on .ln i{animation:rise 1.3s .25s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{transform:none}}
.ti .eyebrow,.ti .sub,.ti .micro,.ti .btn{opacity:0;transform:translateY(16px);transition:.9s .6s}
.ti.on .eyebrow,.ti.on .sub,.ti.on .micro,.ti.on .btn{opacity:1;transform:none}
.ti:not(:first-child){justify-content:flex-start;padding-top:15vh}
.ti:not(:first-child) .sub{position:absolute;bottom:23vh;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:#4a3118}
.ti:first-child{justify-content:center;padding-top:6vh}
.ti:first-child .sub{font-family:var(--serif);font-size:1.25rem;max-width:520px;margin:14px 0 8px;color:#5a4128}
.ti .micro{font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:#6b4f30;margin:18px 0 26px}
.ti .btn{pointer-events:auto}
.ctrl{position:absolute;bottom:5vh;left:0;right:0;z-index:6;display:flex;flex-direction:column;align-items:center;gap:16px;transition:opacity .6s}
.stage.intro .ctrl{opacity:0;pointer-events:none}
.rb{display:flex;gap:14px}.rb button{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--bg);transition:.3s}.rb button:hover{background:var(--gold2);transform:scale(1.1)}
.stage .hint{position:absolute;left:28px;bottom:5vh;z-index:6;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:#4a3118}
#pre .ring{animation:spin 14s linear infinite;width:200px;height:200px}
.stage:not(.ready) .ti{opacity:0!important}
#side a{background:#4a3118}
/* product dial */
@media(min-width:861px){.pd{grid-template-columns:1.1fr 1fr;align-items:start}}
.dialcol{position:sticky;top:90px;text-align:center}
.dialwrap{position:relative;width:min(100%,640px);aspect-ratio:1;margin:0 auto;cursor:grab;color:#6b4f30;touch-action:pan-y;background:radial-gradient(circle,#fff8ea,transparent 68%)}
.dialwrap:active{cursor:grabbing}
.dialwrap .dial{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dn{font-family:var(--sans);font-size:11px;fill:currentColor;stroke:none;letter-spacing:.1em}
.ar{font-family:var(--sans);font-size:11px;letter-spacing:.28em}
.dialwrap #gl{position:absolute;inset:16%;width:68%;height:68%;pointer-events:none}
.deg{position:absolute;bottom:-46px;left:50%;transform:translateX(-50%);text-align:center}
.deg b{display:block;font-family:var(--serif);font-size:1.4rem;font-weight:500}.deg span{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink2)}
.script{font-family:var(--serif);font-style:italic;font-size:clamp(3rem,7vw,5.4rem);line-height:1;margin-top:46px;color:#3d2b1a}
.panel{background:var(--card);padding:38px 36px;border:1px solid var(--line);box-shadow:0 30px 60px -40px rgba(90,60,20,.4)}
.thumbs{display:flex;gap:10px;margin-top:22px}
.thumbs button{width:70px;height:70px;border:1px solid var(--line);background:radial-gradient(#fffaf0,#efd5a6);padding:8px;transition:.3s}
.thumbs button.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
@media(max-width:860px){.dialcol{position:static}.ti:not(:first-child){padding-top:13vh}.stage .hint{display:none}}

/* czard-style transition: dark dip + golden portal, fog band, ring-and-dot cursor */
.stage .fog{position:absolute;left:-5%;right:-5%;bottom:-4%;height:34%;z-index:2;pointer-events:none;background:linear-gradient(transparent,rgba(245,225,185,.55) 40%,rgba(236,208,155,.95));filter:blur(14px)}
.stage .portal{position:absolute;z-index:4;top:34%;left:-30%;width:34vw;height:26vh;border-radius:50%;background:radial-gradient(ellipse,#fff1b8,#e8c26a 45%,rgba(232,194,106,0) 72%);filter:blur(22px);opacity:0;pointer-events:none}
.stage.tr .portal{animation:portal 1.6s cubic-bezier(.6,0,.3,1)}
@keyframes portal{0%{left:-30%;opacity:0;transform:scale(.6)}25%{opacity:1}60%{opacity:1;transform:scale(1.15,.9)}100%{left:110%;opacity:0;transform:scale(.7)}}
.stage .bgs::after{content:"";position:absolute;inset:0;background:#3b2a18;opacity:0;transition:opacity .6s;pointer-events:none}
.stage.tr .bgs::after{opacity:.78}
.stage.tr .bgs{transform:scale(1.18);filter:blur(10px)}
#cur{width:34px;height:34px}
#cur::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--gold2)}
.stage .ti h1{opacity:.82}
#ph{position:absolute;z-index:3;left:50%;top:50%;height:62%;transform:translate(-50%,-50%) scale(.9);opacity:0;transition:opacity .9s,transform 1.2s;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(60,35,10,.35))}
#ph.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.stage.tr #ph{opacity:0}
.views{position:absolute;inset:16%;pointer-events:none}
.views img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .45s}
.views img:first-child{opacity:1}
.views img:nth-child(3){mix-blend-mode:multiply}

/* turntable: stacked layers give the cutout real edge depth while it spins */
#ph{position:absolute;z-index:3;left:50%;top:50%;width:min(64vh,82vw);aspect-ratio:1;transform:translate(-50%,-52%) scale(.9);opacity:0;transition:opacity .9s,transform 1.2s;pointer-events:none;perspective:1400px;height:auto;filter:none}
#ph.on{opacity:1;transform:translate(-50%,-52%) scale(1)}
.stage.tr #ph{opacity:0}
#ph .tt{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
#ph .tt img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 26px rgba(60,35,10,.28))}
#ph .gshadow{position:absolute;left:14%;right:14%;bottom:-3%;height:9%;border-radius:50%;background:radial-gradient(ellipse,rgba(55,32,10,.5),transparent 70%);filter:blur(10px)}

/* ===== responsive layer: 100px phones/watches up to 2000px+ displays ===== */
html{font-size:clamp(14px,.4vw + 12px,22px);-webkit-text-size-adjust:100%}
body{min-width:0}
h1,h2,h3,p,dd,summary,.sub,.eyebrow{overflow-wrap:anywhere}
.wrap{padding-left:clamp(12px,4vw,32px);padding-right:clamp(12px,4vw,32px)}
@media(min-width:1500px){.wrap{max-width:1500px}}
@media(min-width:1900px){.wrap{max-width:1760px}}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.pd>*,.split>*,.dialcol,.panel{min-width:0}
.panel{padding:clamp(18px,4vw,38px) clamp(14px,3.5vw,36px)}
.numpick input{width:min(140px,100%)}
.thumbs{flex-wrap:wrap}
.thumbs button{width:clamp(52px,16vw,70px);height:clamp(52px,16vw,70px)}
.btn{padding:clamp(12px,3vw,15px) clamp(18px,5vw,34px)}
.card dl{grid-template-columns:auto minmax(0,1fr)}
.cartrow{grid-template-columns:clamp(64px,18vw,110px) minmax(0,1fr) auto}
.script{font-size:clamp(2.4rem,9vw,5.6rem)}
h1{font-size:clamp(2rem,8vw,5.6rem)}
.ti h1{font-size:clamp(2.2rem,10vw,9rem);letter-spacing:.06em}
.ti:not(:first-child) .sub{bottom:clamp(120px,23vh,260px);padding:0 12px}
.ctrl{bottom:clamp(14px,5vh,60px)}
@media(min-width:1600px){.ti h1{font-size:clamp(7rem,9vw,13rem)}#ph{width:min(62vh,50vw)}}
@media(max-width:860px){footer .cols{grid-template-columns:1fr 1fr}}
@media(max-width:520px){
  footer .cols{grid-template-columns:1fr;gap:26px}
  footer .copy{flex-direction:column}
  header.top .r a[href="shop.html"]{display:none}
  .logo{font-size:1.05rem;letter-spacing:.24em}
  .cities{letter-spacing:.12em;font-size:1.25rem}
  .numbers span{padding:2px 8px}
  .pagehead{margin-bottom:34px}
  section{padding:60px 0}
  #menu{padding:96px 24px 24px}
  #menu a{font-size:1.25rem}
  .page{padding-top:110px}
}
@media(max-width:360px){
  header.top{padding:10px 10px}
  header.top .l,header.top .r{gap:10px}
  #snd{display:none}
  .logo{font-size:.85rem;letter-spacing:.14em}
  .logo small{display:none}
  .burger{transform:scale(.85)}
  .rb button{width:34px;height:34px}
  .pills button{padding:7px 12px;letter-spacing:.1em}
  .tools{gap:10px}
  .tools select{width:100%}
  .ti .micro{letter-spacing:.14em}
}
@media(max-width:200px){
  .logo{display:none}
  header.top{justify-content:space-between}
  .ti h1{letter-spacing:.02em}
  .ti .sub,.ti .micro,.ti .eyebrow{display:none}
  .ti:first-child .btn{padding:10px 14px;letter-spacing:.1em}
  .stage .ctrl .btn{padding:10px 14px;letter-spacing:.1em}
}
@media(max-height:560px) and (orientation:landscape){
  .ti:not(:first-child){padding-top:10vh}
  .ti h1{font-size:clamp(2rem,7vw,5rem)}
  .ti:not(:first-child) .sub{display:none}
  .stage{min-height:480px}
}
#pre .ring{width:min(200px,70vw);height:min(200px,70vw)}
#pre b{font-size:clamp(1.2rem,8vw,2.4rem)}
footer a,footer p,footer .copy span,.tbl td,.cartrow p,.card dd{overflow-wrap:anywhere}
footer .cols>div{min-width:0}
input,textarea,select{min-width:0;max-width:100%}
.btn{max-width:100%;white-space:normal;text-align:center}
.tbl td:first-child{width:auto;padding-right:8px}
.tbl{table-layout:fixed}
@media(max-width:200px){.tbl td{display:block;width:100%;border:0;padding:4px 0}.tbl tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}footer .logo{display:block;font-size:.8rem;letter-spacing:.1em}.eyebrow{letter-spacing:.14em}}
.numbers{font-size:clamp(1.2rem,6vw,4.4rem);gap:clamp(4px,1.5vw,10px)}
.numbers span{min-width:0;padding:4px clamp(6px,2vw,16px)}
form.contact{grid-template-columns:minmax(0,1fr)}
form.contact>*{min-width:0}
.numpick{flex-wrap:wrap}
@media(max-width:200px){
  .pills button{padding:6px 8px;letter-spacing:.04em;font-size:.6rem}
  .sizes button{min-width:32px;padding:7px 6px}
  .sizes{gap:5px}
  html,body{overflow-x:hidden}
}

/* ===== brand + type pass (Zarin: Instrument Serif + Syne) ===== */
.logo{display:flex;flex-direction:column;align-items:center;gap:5px;line-height:1}
.logo .mark{width:26px;height:26px;color:var(--gold2);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.logo:hover .mark{transform:rotate(90deg)}
.logo b{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:.34em;text-indent:.34em;text-transform:uppercase}
.logo small{font-family:var(--sans);font-size:.5rem;letter-spacing:.34em;text-transform:uppercase;color:var(--gold2);margin-top:2px}
header.top .logo small{display:none}
footer .logo{align-items:flex-start;color:#fff}footer .logo .mark{color:#e0b66b}footer .logo b{text-indent:0}
body{font-size:.94rem;letter-spacing:.005em}
h1,h2,h3{letter-spacing:.03em}
.ti h1{font-size:clamp(2.6rem,12vw,11rem);letter-spacing:.07em}
.eyebrow{letter-spacing:.24em;font-size:.68rem}
.btn,.link,.pills button,.cartb,.card dl,.tag,.thumbs,.dn,.ar,.deg span,label{letter-spacing:.14em}
.btn{font-size:.7rem}
.card h3{font-size:1.9rem}.card .price{font-family:var(--serif);font-size:1.2rem;letter-spacing:.04em}
.script,.fr,.ti:not(:first-child) .sub,.scene p.sub,.ti:first-child .sub,.pagehead p,.split p{font-family:var(--serif)}
.pagehead p,.split p{font-size:1.2rem}
.ti:first-child .sub{font-size:1.45rem}
.ti:not(:first-child) .sub{font-size:1.6rem}
.script{font-size:clamp(3rem,10vw,6.4rem)}
.faq summary{font-size:1.7rem}
.numbers{font-family:var(--serif)}
.marq div{letter-spacing:.14em}
#menu a{font-size:1.7rem}
.dn{font-size:10px}.ar{font-size:10px;letter-spacing:.24em}
.pd .price,.sum{font-family:var(--serif)}
@media(max-width:520px){.logo b{font-size:1.15rem;letter-spacing:.24em;text-indent:.24em}.logo .mark{width:22px;height:22px}}
@media(max-width:360px){.logo b{font-size:.95rem;letter-spacing:.16em;text-indent:.16em}.logo .mark{width:18px;height:18px}}
@media(max-width:200px){.logo b{display:none}.logo{display:flex}}

.bg .foot{image-rendering:auto;backface-visibility:hidden;transform:translateZ(0)}
header.top:not(.solid)::before{content:"";position:absolute;left:0;right:0;top:0;height:130%;background:linear-gradient(rgba(255,241,221,.7),rgba(255,241,221,.35) 55%,transparent);z-index:-1;pointer-events:none}
header.top .logo b,header.top .burger i{text-shadow:0 0 14px rgba(255,241,221,.9)}
.pimg{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 14px 18px rgba(80,50,15,.22))}.card .art .pimg{transition:transform .8s cubic-bezier(.2,.7,.2,1)}.card:hover .art .pimg{transform:scale(1.06) rotate(-2deg)}.art-big .pimg,.cartrow .art .pimg{filter:drop-shadow(0 20px 24px rgba(80,50,15,.25))}

/* ===== scene layout zones: title (top) / product (middle) / caption + controls (bottom) ===== */
.stage #gl{inset:auto;left:0;right:0;top:25%;height:55%;width:100%}
#ph{top:52.5%;width:min(52vh,82vw)}
.ti:not(:first-child){padding-top:clamp(64px,10vh,120px)}
.ti h1{font-size:clamp(2.2rem,min(11vw,15vh),9rem)}
.ti:not(:first-child) .sub{bottom:calc(clamp(14px,5vh,60px) + 118px);font-size:clamp(1.15rem,2.6vh,1.6rem);padding:0 16px;max-width:100%;text-shadow:0 0 18px rgba(255,241,221,.7)}
.ti .eyebrow{margin-bottom:6px}
.stage.dark .ti h1,.stage.dark .ti .sub,.stage.dark .ti .eyebrow,.stage.dark .ti .micro{color:#fff1dd;text-shadow:0 2px 24px rgba(20,10,0,.55)}
.stage.dark .ti .eyebrow{color:#f0cf8e}
body.dk header.top:not(.solid) .logo,body.dk header.top:not(.solid) .logo .mark{color:#fff1dd}
body.dk header.top:not(.solid)::before{background:linear-gradient(rgba(30,18,6,.55),rgba(30,18,6,.2) 55%,transparent)}
body.dk header.top:not(.solid) .burger i{background:#fff1dd}
body.dk header.top:not(.solid) .cartb,body.dk header.top:not(.solid) .logo b{color:#fff1dd;text-shadow:none}
@media(max-height:560px) and (orientation:landscape){.stage #gl{top:22%;height:58%}.ti:not(:first-child) .sub{display:none}}
.stage.dark .ti:not(:first-child) .sub{color:#4a3118;text-shadow:0 0 18px rgba(255,241,221,.85)}
.stage #gl{top:22%;height:62%;filter:drop-shadow(0 14px 20px rgba(40,20,0,.42))}
.ti:not(:first-child) .sub{bottom:calc(clamp(14px,5vh,60px) + 112px)}
.ti .micro{letter-spacing:.18em;max-width:92vw;padding:0 12px;line-height:1.8;text-align:center}
.stage:not(.dark) .ti h1{text-shadow:0 0 34px rgba(255,241,221,.75),0 0 8px rgba(255,241,221,.5)}
.dialwrap #gl{filter:drop-shadow(0 14px 16px rgba(90,50,12,.38))}
.dialwrap{background:radial-gradient(circle,#fffaf0 0%,#f4e2c4 70%,transparent 72%)}
main.page+footer{margin-top:clamp(70px,12vw,130px)}
main.page{min-height:60vh}