/* ===== design effects (all pages) ===== */

/* 10. film grain over everything */
body::after{
  content:""; position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)}
}

/* 1. page-transition curtain */
.pt{ position:fixed; inset:0; z-index:200; pointer-events:none; background:var(--pc,#1d1712);
     transform:translateY(100%); display:grid; place-items:center }
.pt-mark{ width:54px; height:54px; background:rgba(0,0,0,.55); opacity:0; transition: opacity .3s;
  -webkit-mask:url(../img/logo-mark.png) center/contain no-repeat; mask:url(../img/logo-mark.png) center/contain no-repeat }
.pt.enter{ transform:translateY(0); transition: transform .6s cubic-bezier(.76,0,.24,1); pointer-events:all }
.pt.enter .pt-mark, .pt.cover .pt-mark{ opacity:1 }
.pt.cover{ transform:translateY(0); transition:none }
.pt.leave{ transform:translateY(-100%); transition: transform .9s cubic-bezier(.76,0,.24,1) .1s }

/* 3. intro loader */
.intro-on body{ overflow:hidden }
.intro-ld{ position:fixed; inset:0; z-index:300; background:#1d1712; color:#F3EFE8; display:grid; place-items:center;
           transition: transform 1s cubic-bezier(.76,0,.24,1) }
.intro-ld.out{ transform:translateY(-100%) }
.il-in{ text-align:center; transition: opacity .4s, transform .8s cubic-bezier(.76,0,.24,1) }
.intro-ld.out .il-in{ opacity:0; transform:translateY(-60px) }
.il-mark{ display:block; width:58px; height:58px; margin:0 auto 26px; background:#F3EFE8; animation: ilfade .8s ease both;
  -webkit-mask:url(../img/logo-mark.png) center/contain no-repeat; mask:url(../img/logo-mark.png) center/contain no-repeat }
.il-word{ font-family:var(--display); font-size:clamp(30px,6vw,84px); letter-spacing:.06em; overflow:hidden; display:flex; justify-content:center }
.il-word span{ display:inline-block; transform:translateY(110%); animation: ilup .9s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(.25s + var(--i) * .07s) }
.il-bar{ width:min(260px,60vw); height:1px; margin:28px auto 16px; background:rgba(243,239,232,.2); overflow:hidden }
.il-bar i{ display:block; height:100%; background:#F3EFE8; transform-origin:left; animation: ilbar 1.7s cubic-bezier(.65,0,.35,1) both }
.il-sub{ font-size:11px; letter-spacing:.32em; text-transform:uppercase; opacity:0; animation: ilfade .8s ease 1s both }
@keyframes ilup{ to{ transform:none } }
@keyframes ilfade{ from{ opacity:0 } to{ opacity:.8 } }
@keyframes ilbar{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* 2. custom cursor */
.has-cursor, .has-cursor a, .has-cursor button{ cursor:none }
.cur-dot, .cur-ring{ position:fixed; left:0; top:0; z-index:400; pointer-events:none; mix-blend-mode:difference }
.cur-dot{ width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%; background:#fff }
.cur-ring{ width:36px; height:36px; margin:-18px 0 0 -18px; display:grid; place-items:center }
.cur-ring::before{ content:""; position:absolute; inset:0; border:1px solid #fff; border-radius:50%;
  transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .3s }
.cur-ring span{ position:relative; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#000; opacity:0; transition: opacity .2s }
.cur-ring.link::before{ transform:scale(1.6) }
.cur-ring.big::before{ transform:scale(2.6); background:#fff }
.cur-ring.big span{ opacity:1 }
.cur-ring.press::before{ transform:scale(.8) }
.cur-out .cur-dot, .cur-out .cur-ring{ opacity:0 }

/* 4. headings: each word slides up from a mask */
.sw{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em }
.sw > span{ display:inline-block; transform:translateY(105%); transition: transform 1s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--w) * .06s) }
.sw-in .sw > span{ transform:none }

/* 9. 3D tilt */
.tilt{ transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition: transform .5s cubic-bezier(.22,1,.36,1); transform-style:preserve-3d }

/* 7. bag drawer */
.drawer-shade{ position:fixed; inset:0; z-index:150; background:rgba(20,15,12,.45); opacity:0; pointer-events:none; transition: opacity .4s }
.drawer{ position:fixed; top:0; right:0; bottom:0; z-index:160; width:min(420px,100vw); background:#F3EFE8; color:#1d1712;
         display:flex; flex-direction:column; transform:translateX(100%); transition: transform .6s cubic-bezier(.76,0,.24,1) }
.bag-open .drawer{ transform:none }
.bag-open .drawer-shade{ opacity:1; pointer-events:all }
.dr-head{ display:flex; justify-content:space-between; align-items:center; padding:24px 24px 18px; border-bottom:1px solid rgba(0,0,0,.12) }
.dr-head h2{ font-family:var(--display); font-weight:400; font-size:18px; text-transform:uppercase }
.dr-x{ font-size:16px; width:36px; height:36px; border-radius:50%; border:1px solid rgba(0,0,0,.2) }
.dr-list{ flex:1; overflow:auto; padding:10px 24px; overscroll-behavior:contain }
.dr-row{ display:grid; grid-template-columns:76px 1fr auto; gap:14px; align-items:center; padding:14px 0; border-bottom:1px solid rgba(0,0,0,.08) }
.dr-pic{ background:var(--c); aspect-ratio:1; display:grid; place-items:center }
.dr-pic img{ height:80%; width:auto }
.dr-info a{ font-family:var(--display); font-size:12px; text-transform:uppercase; display:block; margin-bottom:4px }
.dr-info span{ font-size:13px; opacity:.7 }
.dr-qty{ display:inline-flex; align-items:center; gap:12px; margin-top:8px; border:1px solid rgba(0,0,0,.2); border-radius:99px; padding:2px 10px }
.dr-qty button{ font-size:15px; width:18px }
.dr-qty b{ font-weight:600; font-size:13px; min-width:12px; text-align:center }
.dr-rm{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.55; text-decoration:underline }
.dr-empty{ padding:40px 0; text-align:center; line-height:2; opacity:.8 }
.dr-empty a{ text-decoration:underline }
.dr-foot{ padding:20px 24px 26px; border-top:1px solid rgba(0,0,0,.12) }
.dr-sum{ display:flex; justify-content:space-between; font-size:14px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px }
.dr-sum b{ font-family:var(--display); font-weight:400 }
.dr-go{ display:grid; place-items:center; height:54px; background:#1d1712; color:#F3EFE8; font-family:var(--display); font-size:12px; letter-spacing:.06em; text-transform:uppercase }
.dr-note{ font-size:11px; opacity:.55; margin-top:12px; text-align:center }
.toast .t-view{ margin-left:14px; text-decoration:underline; letter-spacing:inherit; text-transform:inherit; font-size:inherit; color:inherit }

/* 8. sticky add-to-bag bar (product page) */
.sticky-buy{ position:fixed; left:50%; bottom:18px; z-index:120; width:min(560px,calc(100vw - 24px)); translate:-50% 140%;
  display:grid; grid-template-columns:52px 1fr auto; gap:14px; align-items:center; padding:8px 8px 8px 10px; border-radius:99px;
  background:rgba(29,23,18,.92); color:#F3EFE8; box-shadow:0 20px 50px -20px rgba(0,0,0,.5); transition: translate .6s cubic-bezier(.76,0,.24,1) }
.sticky-buy.on{ translate:-50% 0 }
.sticky-buy .sb-pic{ width:52px; height:52px; border-radius:50%; background:var(--c); display:grid; place-items:center; overflow:hidden }
.sticky-buy .sb-pic img{ height:78%; width:auto }
.sticky-buy b{ display:block; font-family:var(--display); font-weight:400; font-size:12px; text-transform:uppercase }
.sticky-buy span{ font-size:12px; opacity:.7 }
.sticky-buy button{ height:46px; padding:0 22px; border-radius:99px; background:var(--c); color:#1d1712; font-family:var(--display); font-size:11px; letter-spacing:.06em; text-transform:uppercase }
.bag-open .sticky-buy{ translate:-50% 140% }

@media (prefers-reduced-motion: reduce){
  body::after{ animation:none }
  .sw > span{ transform:none; transition:none }
}

/* touch screens: drop the costliest effects so scrolling stays smooth */
@media (hover: none), (max-width: 720px){
  body::after{ display:none }                 /* animated grain repaints the whole screen every frame */
  .ing.blur img, .ing.blur svg{ filter:none; opacity:.75 }
  .ing img{ filter:drop-shadow(0 8px 8px rgba(0,0,0,.16)) }
}
.dr-go{ text-align:center; padding:0 16px; line-height:1.3 }
@media (max-width: 480px){ .dr-go{ font-size:10.5px } }