/*
Theme Name: Dannoz Landing
Description: The Dannoz Studios landing page: six full-screen pages. Hero images come from Appearance > Hero Products, the maker page from Appearance > Customize > Landing story, and the review and the print and paint pieces from the store.
Version: 2.4.0
Author: Dannoz Studios
Text Domain: dannoz-landing
*/
:root{--display:Saira,Inter,system-ui,sans-serif;--body:Inter,system-ui,sans-serif;color-scheme:dark}
html{--navbg:rgba(16,15,12,.88);--navfg:#fff;--navln:#6d5b34}
.sl{--bg:#100f0c;--bgrgb:16,15,12;--fg:#fff;--bd:#f1eadb;--dm:#cfc7b6;--kk:#e6bd66;--bb:#d8ab4d;--bf:#17130a;--bh:#e6bd66;--toff:#3a342a;--tdn:#6d5b34;--tcu:#d8ab4d;--tct:#e6bd66;--lb:#d8ab4d;--lf:#17130a}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#100f0c;color:#fff;font:400 16px/1.5 var(--body)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid #d8ab4d;outline-offset:3px}
img{display:block}
.sl{position:relative;overflow:hidden;background:var(--bg);color:var(--fg)}
.kick{font-size:13px;font-weight:700;letter-spacing:.16em;color:var(--kk);margin:0 0 14px;text-transform:uppercase}
h1,h2{font-family:var(--display);font-weight:800;color:var(--fg);text-wrap:balance;margin:0}
.text{margin:0 0 28px;font-size:clamp(16px,.5vw + 12px,20px);line-height:1.55;color:var(--bd);max-width:46ch}
.cta,.links{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;border-radius:6px;font-weight:700;font-size:17px;transition:transform .15s ease,background-color .15s ease,border-color .15s ease}
.btn--gold{background:var(--bb);color:var(--bf);font-weight:800}
.btn--gold:hover{background:var(--bh);transform:translateY(-2px)}
.btn--ghost{border:1px solid var(--tdn);color:var(--fg);background:rgba(var(--bgrgb),.6)}
.btn--ghost:hover{border-color:var(--tcu)}
.more{font-weight:700;color:var(--kk);font-size:15px}
.more:hover{text-decoration:underline}

/* chrome */
.top{position:absolute;z-index:40;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:20px max(32px,env(safe-area-inset-right,0px)) 0 max(32px,env(safe-area-inset-left,0px));pointer-events:none}
.top>*{pointer-events:auto}
.logo{position:relative;display:grid;place-items:center;width:132px;height:132px;margin:-16px 0 0 -22px}
.logo img{position:relative;width:56%;height:56%}
.ring{position:absolute;inset:0;width:100%;height:100%;animation:rot 28s linear infinite;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9))}
.ring text{font:700 17px Cinzel,Georgia,serif;fill:url(#ringg)}
@keyframes rot{to{transform:rotate(360deg)}}
.dots,.nx{display:none}
.dots button{width:12px;height:12px;border-radius:50%;border:2px solid #d8ab4d;background:var(--navbg);padding:0;cursor:pointer}
.dots button.on{background:#d8ab4d;transform:scale(1.3)}
.nx{align-items:center;gap:14px;background:var(--navbg);border:1px solid var(--navln);border-radius:40px;padding:6px 6px 6px 20px;color:var(--navfg);font:700 12px var(--body);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.nx i{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:#d8ab4d;font-style:normal;font-size:20px;color:#17130a}

/* page 1: the hero, full screen */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.artbox{position:absolute;right:0;top:0;width:72%;height:100%;overflow:hidden}
.art{width:100%;height:100%;object-fit:cover;object-position:var(--x,50%) var(--y,38%);scale:var(--z,1);transform-origin:var(--x,50%) var(--y,38%);display:block;max-width:none}
.blur{position:absolute;left:0;top:0;bottom:0;width:66%;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);-webkit-mask-image:linear-gradient(90deg,#000 62%,transparent);mask-image:linear-gradient(90deg,#000 62%,transparent)}
.fade{position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--bgrgb)) 0%,rgb(var(--bgrgb)) 30%,rgba(var(--bgrgb),.86) 46%,rgba(var(--bgrgb),0) 68%)}
.hero main{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;max-width:620px;padding:100px 32px 40px;margin-left:max(0px,calc((100vw - 1216px)/2))}
.hero h1{font-size:clamp(46px,3.8vw + 22px,88px);line-height:1;margin:0 0 20px}
.tag[hidden]{display:none}
.tag{position:absolute;z-index:2;right:max(56px,env(safe-area-inset-right,0px));bottom:116px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 14px;border-radius:6px;background:var(--navbg);border:1px solid var(--navln);color:var(--navfg);font-size:13px;font-weight:600}

/* pages 2 to 5, stacked layout (phones) */
.stop{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.stop .pic{order:-1}
.pic{position:relative;overflow:hidden;background:#0b0a08;aspect-ratio:4/5;max-height:80svh;width:100%}
.pic img.p{width:100%;height:100%;object-fit:cover}
.lab{position:absolute;left:14px;bottom:14px;padding:9px 14px;border-radius:4px;background:var(--lb);color:var(--lf);font:800 12px var(--body);letter-spacing:.14em;text-transform:uppercase}
.tx{position:relative;display:flex;flex-direction:column;justify-content:center;padding:34px max(16px,env(safe-area-inset-left,0px)) 48px}
.stop h2{font-size:clamp(40px,3.4vw + 18px,84px);line-height:1;margin:0 0 18px}
.qm{font-family:var(--display);font-weight:800;font-size:110px;line-height:.6;color:var(--tcu);height:48px;margin:0 0 4px}
.q{font-family:var(--display);font-weight:700;font-size:clamp(26px,1.9vw + 14px,46px);line-height:1.18;color:var(--fg);margin:0 0 22px;text-wrap:balance}
.who{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--dm);margin:0}
.who::before{content:"";width:40px;height:2px;background:var(--tcu)}
.who b{color:var(--fg)}
.trk{display:flex;gap:4px;list-style:none;margin:0 0 14px;padding:0;max-width:560px}
.trk li{flex:1;min-width:0;border-top:10px solid var(--toff);padding-top:0;font-size:0;height:0}
.trk li.d{border-color:var(--tdn)}
.trk li.c{border-color:var(--tcu)}
.now{display:block;font-weight:800;color:var(--tct);margin:0 0 8px}
.eta{margin:0 0 26px;font-size:15px;color:var(--dm)}
.eta b{color:var(--fg)}

/* page 6 */
.end{min-height:0;display:flex;flex-direction:column;text-align:center}
.end .bg{position:absolute;inset:0;background-size:cover;background-position:var(--mx,var(--x,50%)) var(--my,var(--y,30%));scale:var(--mz,var(--z,1));transform-origin:var(--mx,var(--x,50%)) var(--my,var(--y,30%));opacity:.28}
.end .veil{position:absolute;inset:0;background:rgba(var(--bgrgb),.55)}
.end .mid{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:64px 16px 40px}
.end h2{font-size:clamp(40px,4.4vw + 16px,96px);line-height:1;max-width:16ch;margin:0 0 28px}
.end .cta{justify-content:center}
footer{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding:16px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));border-top:1px solid var(--toff);font-size:13px;color:var(--dm);text-align:left}
.socs{display:flex;gap:10px}
.socs a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--tdn);border-radius:50%;color:var(--fg);background:rgba(var(--bgrgb),.6)}
.socs a:hover{border-color:var(--tcu)}
.btn{width:100%}
.top{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-top:12px}
.logo{width:104px;height:104px;margin:-14px 0 0 -14px}
.hero{--h:min(100vw,58svh)}
.artbox{width:100%;height:var(--h)}
.art{object-position:var(--mx,var(--x,50%)) var(--my,var(--y,30%));scale:var(--mz,var(--z,1));transform-origin:var(--mx,var(--x,50%)) var(--my,var(--y,30%))}
.blur{display:none}
.fade{bottom:auto;height:var(--h);background:linear-gradient(rgba(var(--bgrgb),.25),rgba(var(--bgrgb),0) 26%,rgba(var(--bgrgb),0) 80%,rgb(var(--bgrgb)))}
.hero main{justify-content:flex-start;max-width:none;margin:0;padding:calc(var(--h) - 40px) max(16px,env(safe-area-inset-left,0px)) 28px}
.tag{right:16px;bottom:auto;top:calc(var(--h) - 104px)}

/* Dan's photo fills the picture box; the crop keeps his face in view */
.pic.me{background:#0b0a08;aspect-ratio:1/1;max-height:80svh;display:block;padding:0}
.pic.me img.p{object-position:var(--fx,27%) var(--fy,24%)}
@media (min-width:601px) and (max-width:900px){
 .tx{padding:44px 48px 64px}
 .hero main{padding-left:48px;padding-right:48px}
 .top{padding-left:32px;padding-right:32px}
 .pic{max-height:70svh}
 .pic.me{aspect-ratio:4/3}
 .stop h2{font-size:clamp(44px,6vw,64px)}
 .end h2{max-width:20ch}
}

/* reviews: the chosen review. With two or more, each new photo wipes up over the last, the words slide in, and a counter, arrows and a gold timeline appear. */
.pic{isolation:isolate}
.rvs{display:grid}
.rv{grid-area:1/1;margin:0;visibility:hidden}
.rv.on{visibility:visible}
.rv>*{opacity:0;transform:translateY(34px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rv.on>*{opacity:1;transform:none}
.rv.on>:nth-child(1){transition-delay:.35s}.rv.on>:nth-child(2){transition-delay:.5s}.rv.on>:nth-child(3){transition-delay:.65s}
.rv.on>:nth-child(4){transition-delay:.8s}.rv.on>:nth-child(5){transition-delay:.95s}.rv.on>:nth-child(6){transition-delay:1.1s}
.qsec .lab{z-index:2147483000 !important}
.rv .stars{color:var(--tcu);letter-spacing:.2em;font-size:18px;margin:0 0 12px}
.rv .q{margin:0 0 22px}
.rv .who a{font-weight:700;color:var(--kk)}
.rv .who a:hover{text-decoration:underline}
.rvi{position:absolute;inset:0;clip-path:inset(100% 0 0 0)}
.rvi.on{clip-path:inset(0)}
.rvi img{width:100%;height:100%;object-fit:cover;object-position:var(--mx,var(--x,50%)) var(--my,var(--y,25%));scale:var(--mz,var(--z,1));transform-origin:var(--mx,var(--x,50%)) var(--my,var(--y,25%))}
.count{display:flex;align-items:baseline;gap:10px;font-family:var(--display);font-weight:800;margin:0 0 6px}
.count b{font-size:44px;line-height:1;color:var(--fg)}
.count span{font-size:18px;color:var(--dm)}
.arrows{display:flex;gap:10px;margin-top:26px}
.arrows button{width:52px;height:52px;border-radius:50%;border:2px solid var(--tcu);background:rgba(var(--bgrgb),.6);color:var(--tct);font-size:20px;cursor:pointer}
.arrows button:hover{background:var(--tcu);color:var(--bf)}
.tl{position:absolute;z-index:6;left:0;bottom:0;height:4px;width:0;background:var(--tcu)}
.tl.run{animation:rvfill var(--rvt,7s) linear forwards}
.rvsec.hold .tl.run{animation-play-state:paused}
@keyframes rvfill{from{width:0}to{width:100%}}
@media (min-width:901px) and (min-height:640px){.end .bg{background-position:var(--x,50%) var(--y,30%);scale:var(--z,1);transform-origin:var(--x,50%) var(--y,30%)}.count b{font-size:56px}.rvi img{object-position:var(--x,50%) var(--y,25%);scale:var(--z,1);transform-origin:var(--x,50%) var(--y,25%)}}
@media (prefers-reduced-motion:reduce){.rv>*{transition:none}.rvi{transition:none!important}.tl{display:none}}

/* studio intro, same as the live page */
.intro{position:fixed;inset:0;z-index:9999;background:#100f0c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:none;border-bottom:2px solid #d8ab4d;animation:lift .7s cubic-bezier(.76,0,.24,1) 1.05s both}
.intro img{width:min(240px,60vw);height:auto;animation:logoIn .6s ease-out both,logoOut .3s ease-in .85s forwards}
.intro i{display:block;width:180px;height:2px;background:#d8ab4d;transform-origin:left;animation:draw .6s cubic-bezier(.65,0,.35,1) .2s both,logoOut .3s ease-in .85s forwards}
.art{animation:settle 2.4s cubic-bezier(.16,1,.3,1) 1.05s both}
@keyframes lift{to{transform:translateY(-100%);visibility:hidden}}
@keyframes logoIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
@keyframes logoOut{to{opacity:0}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes settle{from{transform:scale(1.08)}to{transform:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.intro{display:none}.art,.ring{animation:none}.btn,.nx i{transition:none}}

/* big screens: one page per screen, pinned, the next slides up over it */
@media (min-width:901px) and (min-height:640px){
 html{scroll-snap-type:y proximity}
 .sl{height:100vh;height:100svh;scroll-snap-align:start}
 .sl:not(:last-child){position:sticky;top:0}
 .sl+.sl{box-shadow:0 -40px 80px rgba(0,0,0,.45)}
 .btn{width:auto}
 .top{position:fixed;padding:20px max(32px,env(safe-area-inset-right,0px)) 0 max(32px,env(safe-area-inset-left,0px))}
 .logo{width:132px;height:132px;margin:-16px 0 0 -22px}
  .artbox{width:72%;height:100%}.blur{display:block}
 .hero{--h:100%}
 .fade{bottom:0;height:auto;background:linear-gradient(90deg,rgb(var(--bgrgb)) 0%,rgb(var(--bgrgb)) 30%,rgba(var(--bgrgb),.86) 46%,rgba(var(--bgrgb),0) 68%)}
 .hero main{justify-content:center;max-width:620px;margin-left:max(0px,calc((100vw - 1216px)/2));padding:100px 32px 40px}
 .tag{right:max(56px,env(safe-area-inset-right,0px));bottom:116px;top:auto}
 .dots{display:flex;position:fixed;z-index:40;right:max(22px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);flex-direction:column;gap:14px}
 .nx{display:flex;position:fixed;z-index:40;right:max(56px,env(safe-area-inset-right,0px));bottom:36px}
 .nx{transition:bottom .4s ease}
 .nx.last{bottom:116px}
 .stop{position:relative}
 .pic,.pic.me{position:absolute;aspect-ratio:auto;max-height:none;width:auto}
 .tx{position:absolute;padding:0;z-index:2;max-width:none}
 .qm{font-size:140px;height:60px}
 .trk{gap:6px}
 .trk li{font-size:11.5px;font-weight:600;line-height:1.25;letter-spacing:.04em;color:var(--dm);padding-top:9px;height:auto}
 .trk li.c{color:var(--tct);font-weight:800}
 .now{display:none}
 .end{min-height:0}.end .mid{padding:100px 24px 40px}
 footer{padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
 .stop.r .tx{left:max(32px,6vw)}
 .stop.l .tx{right:max(32px,6vw)}
 .stop .tx{top:0;bottom:0;justify-content:center;width:44%;padding:112px 0 28px}
 .stop.r .pic{right:0}.stop.l .pic{left:0}
 .pic{top:0;bottom:0;width:70%}
 .stop::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
 .stop.r::before{background:linear-gradient(90deg,rgb(var(--bgrgb)) 0,rgb(var(--bgrgb)) 28%,rgba(var(--bgrgb),.85) 44%,rgba(var(--bgrgb),0) 66%)}
 .stop.l::before{background:linear-gradient(270deg,rgb(var(--bgrgb)) 0,rgb(var(--bgrgb)) 28%,rgba(var(--bgrgb),.85) 44%,rgba(var(--bgrgb),0) 66%)}
 .stop.mine .pic{width:58%}
 .stop.mine .tx{width:38%}
 .pic.me{--fx:27%;--fy:24%}
 .stop.mine.r::before{background:linear-gradient(90deg,rgb(var(--bgrgb)) 0,rgb(var(--bgrgb)) 44%,rgba(var(--bgrgb),.85) 50%,rgba(var(--bgrgb),0) 66%)}
 .lab{z-index:3}
 .stop.r .lab{left:auto;right:22px;bottom:auto;top:104px}
 .stop.l .lab{left:22px;bottom:auto;top:140px}
}
@media (min-width:901px) and (min-height:640px) and (max-height:780px){
 .stop h2{font-size:clamp(36px,3vw + 14px,64px);margin-bottom:12px}
 .text{margin-bottom:18px}
 .stop .text{font-size:17px;line-height:1.5}
}