/* ============================================================
   ARANGAN PORTFOLIO — base.css
   Shared design system: tokens, reset, layout, components,
   the "paper / stamp / manifest" aesthetic + enhanced motion.
   Loaded by every page. Page-specific CSS lives in home.css etc.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root{
  --paper:#E8DBC2;--paper2:#E1D2B5;--paper3:#D8C7A6;
  --board:#C9AC80;--board-d:#B59669;
  --ink:#2C261E;--ink-soft:#4A4136;--muted:#7C6E55;
  --stamp:#B0492F;--stamp-d:#8E3823;--stamp-glow:rgba(176,73,47,.18);
  --line:rgba(44,38,30,.16);
  --teal:#2E5E5A;   /* accent for "tech / data" elements */
  --gold:#B58A3C;
  --maxw:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-pop:cubic-bezier(.3,1.5,.5,1);
  --shadow:7px 7px 0 rgba(44,38,30,.12);
  --shadow-lg:10px 10px 0 rgba(44,38,30,.14);
  /* paper grain (inline so no extra request) */
  --grain: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='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/></svg>");
}

/* ---------- Reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);background-image:var(--grain);
  color:var(--ink);font-family:'Inter',sans-serif;line-height:1.55;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  /* base entrance */
  animation:pageIn .8s var(--ease) both;
}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--stamp);color:var(--paper)}
.mono{font-family:'Space Mono',monospace}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,46px)}

/* ---------- Custom cursor (refined, fine-pointer only) ---------- */
body.cur,body.cur *{cursor:none!important}
#cur{position:fixed;top:0;left:0;width:30px;height:30px;z-index:9500;
  pointer-events:none;transform:translate(-50%,-50%);transition:width .2s,height .2s,opacity .2s}
#cur svg{width:100%;height:100%;display:block;color:var(--ink)}
#cur .ring{opacity:0;transition:opacity .2s}
#cur.hot{width:64px;height:64px}
#cur.hot .cross{opacity:0}
#cur.hot .ring{opacity:1;color:var(--stamp)}
@media(pointer:coarse){#cur{display:none}}

/* ---------- Unboxing overlay ----------
   Two cardboard flaps meet in the middle under a strip of packing tape.
   On open: the wax PULL-stamp cracks, the tape halves peel back into a
   curl with jagged torn edges, and the flaps swing open. */
#box{position:fixed;inset:0;z-index:9000;perspective:1400px;background:var(--ink);cursor:pointer;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#box .lid{position:absolute;left:0;right:0;height:50%;background:var(--board);
  background-image:repeating-linear-gradient(90deg,var(--board) 0 8px,var(--board-d) 8px 16px);
  box-shadow:inset 0 0 80px rgba(0,0,0,.3);backface-visibility:hidden}
#box .top{top:0;transform-origin:top}#box .bot{bottom:0;transform-origin:bottom}
/* corner tape tabs that sit on the flaps */
#box .ctape{position:absolute;width:64px;height:64px;pointer-events:none;z-index:2}
#box .top .tl{top:0;left:0}#box .top .tr{top:0;right:0}
#box .bot .bl{bottom:0;left:0}#box .bot .br{bottom:0;right:0}
#box .ctape::before{content:"";position:absolute;inset:0;background:rgba(232,219,194,.55);
  background-image:repeating-linear-gradient(125deg,rgba(255,255,255,.22) 0 2px,transparent 2px 7px);
  box-shadow:0 1px 3px rgba(0,0,0,.28)}
#box .lbl{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);z-index:4;text-align:center;
  color:var(--paper);font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.3em;text-transform:uppercase}
#box .lbl b{display:block;font-family:'Archivo';font-weight:900;font-size:clamp(30px,6vw,64px);letter-spacing:-.02em;margin:10px 0}
#box .prompt{position:absolute;top:62%;left:50%;transform:translate(-50%,-50%);z-index:4;
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--paper);
  border:1px solid rgba(241,235,220,.45);padding:13px 22px;border-radius:40px;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}}

/* packing tape across the seam — translucent, glossy, with a dashed tear-here line */
#box .seal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;height:54px;z-index:3;pointer-events:none}
#box .seal::before,#box .seal::after{content:"";position:absolute;left:0;width:100%;height:50%;
  background:linear-gradient(180deg,rgba(248,242,228,.7),rgba(232,219,194,.55));
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.28) 0 2px,transparent 2px 8px);
  box-shadow:0 1px 3px rgba(0,0,0,.3);will-change:transform,opacity}
#box .seal::before{top:0;border-bottom:1px dashed rgba(0,0,0,.28)}
#box .seal::after{bottom:0;border-top:1px dashed rgba(0,0,0,.28)}
/* jagged torn edges where the tape rips apart */
#box .seal::before{clip-path:polygon(0 0,100% 0,100% 86%,97% 100%,93% 88%,88% 100%,84% 90%,79% 100%,
  74% 88%,69% 100%,64% 90%,58% 100%,53% 88%,48% 100%,42% 90%,37% 100%,31% 88%,26% 100%,21% 90%,15% 100%,10% 88%,5% 100%,0 86%)}
#box .seal::after{clip-path:polygon(0 100%,100% 100%,100% 14%,97% 0,93% 12%,88% 0,84% 10%,79% 0,
  74% 12%,69% 0,64% 10%,58% 0,53% 12%,48% 0,42% 10%,37% 0,31% 12%,26% 0,21% 10%,15% 0,10% 12%,5% 0,0 14%)}

/* wax "PULL TO OPEN" stamp sitting on the seam */
#box .wax{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-4deg);z-index:3;
  width:128px;height:128px;color:var(--stamp);pointer-events:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.4));will-change:transform,opacity}
#box .wax svg{width:100%;height:100%}

/* ---- open choreography ---- */
#box.go{animation:boxgone .9s ease 2s forwards}
#box.go .top{animation:flapT 1.6s cubic-bezier(.6,-.05,.25,1) .25s forwards}
#box.go .bot{animation:flapB 1.6s cubic-bezier(.6,-.05,.25,1) .25s forwards}
#box.go .lbl,#box.go .prompt{animation:lblOut .4s ease forwards}
#box.go .ctape{animation:lblOut .5s ease .2s forwards}
/* wax stamp cracks & flies off first */
#box.go .wax{animation:waxCrack .55s cubic-bezier(.5,0,.7,1) .05s forwards}
/* tape halves peel back and curl away */
#box.go .seal::before{animation:sealUp 1.5s cubic-bezier(.5,0,.2,1) .15s forwards}
#box.go .seal::after{animation:sealDn 1.5s cubic-bezier(.5,0,.2,1) .15s forwards}
@keyframes flapT{to{transform:rotateX(-120deg)}}
@keyframes flapB{to{transform:rotateX(120deg)}}
@keyframes lblOut{to{opacity:0}}
@keyframes waxCrack{0%{transform:translate(-50%,-50%) rotate(-4deg) scale(1);opacity:1}
  40%{transform:translate(-50%,-50%) rotate(-4deg) scale(1.14)}
  100%{transform:translate(-50%,-56%) rotate(-16deg) scale(.66);opacity:0}}
/* upper tape peels up and curls back (translate + rotate = rolling curl) */
@keyframes sealUp{to{transform:translateY(-58vh) rotate(8deg);opacity:0}}
/* lower tape peels down and curls back */
@keyframes sealDn{to{transform:translateY(58vh) rotate(-8deg);opacity:0}}
@keyframes boxgone{to{opacity:0;visibility:hidden}}

/* ---------- Corrugated edge ---------- */
.corr{height:14px;background:repeating-linear-gradient(90deg,var(--board) 0 7px,var(--board-d) 7px 14px);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='14'><path d='M0 14 Q7 0 14 14 T28 14 V14 H0 Z' fill='black'/></svg>") repeat-x;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='14'><path d='M0 14 Q7 0 14 14 T28 14 V14 H0 Z' fill='black'/></svg>") repeat-x}

/* ---------- Tape marquee ---------- */
.tapebar{background:rgba(228,216,190,.55);border-top:1px dashed rgba(44,38,30,.2);border-bottom:1px dashed rgba(44,38,30,.2);
  overflow:hidden;padding:8px 0;transform:rotate(-.5deg);margin:6px 0}
.tapebar .tk{display:flex;width:max-content;white-space:nowrap;animation:mq 22s linear infinite;
  font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--stamp)}
.tapebar span{padding:0 16px}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- Navigation bar (shared) ---------- */
.bar{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--ink);color:var(--paper);
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:9px clamp(14px,4vw,30px);font-family:'Space Mono',monospace;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase}
.bar .brand{display:flex;gap:8px;align-items:center;white-space:nowrap}
.bar .brand .dot{width:8px;height:8px;background:var(--stamp);display:inline-block;transform:rotate(45deg)}
.bar .nav{display:flex;gap:20px;flex-wrap:wrap;justify-content:center}
.bar .nav a{opacity:.78;position:relative;padding:2px 0}
.bar .nav a:hover{opacity:1}.bar .nav a.on{opacity:1;color:var(--stamp)}
.bar .nav a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--paper);transition:width .25s}
.bar .nav a:hover::after,.bar .nav a.on::after{width:100%}
.bar .right{display:flex;align-items:center;gap:14px;white-space:nowrap}
/* language toggle */
.lang{display:inline-flex;border:1px solid rgba(241,235,220,.4);border-radius:3px;overflow:hidden}
.lang button{background:transparent;color:var(--paper);border:0;font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:.1em;padding:4px 7px;cursor:pointer;opacity:.6;transition:opacity .2s,background .2s}
.lang button.on{opacity:1;background:var(--stamp)}
.bar .date{color:var(--paper);opacity:.7}
/* hamburger */
.burger{display:none;flex-direction:column;gap:4px;background:none;border:0;cursor:pointer;padding:6px}
.burger span{width:22px;height:2px;background:var(--paper);display:block;transition:transform .3s,opacity .3s}
.burger.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* mobile drawer */
@media(max-width:920px){.bar .nav a:nth-child(n+6){display:none}}
@media(max-width:820px){
  .bar{flex-wrap:wrap}
  .bar .burger{display:flex}
  .bar .nav{order:3;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:0;
    max-height:0;overflow:hidden;transition:max-height .35s var(--ease);padding:0;margin:0}
  .bar.menu .nav{max-height:80vh;padding:6px 0 4px;gap:2px}
  .bar .nav a{display:block!important;padding:9px 0;width:100%;border-bottom:1px solid rgba(241,235,220,.1)}
  .bar .nav a.on{color:var(--paper)}.bar .nav a.on::after{display:none}
  .bar .nav a::before{content:">";color:var(--stamp);margin-right:8px;opacity:0}
  .bar .nav a.on::before{opacity:1}
}

/* ---------- Common components ---------- */
.card{background:var(--paper2);border:1px solid var(--line);box-shadow:var(--shadow)}
.lab{font-family:'Space Mono',monospace;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--stamp)}
.tag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);
  border:1.5px solid var(--ink);padding:5px 11px;border-radius:3px;display:inline-block}
.tag.alt{border-color:var(--stamp);color:var(--stamp)}

/* hero (shared) */
#phero{padding:118px 0 36px}
.phgrid{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(26px,5vw,60px);align-items:center}
@media(max-width:840px){.phgrid{grid-template-columns:1fr}}
.phno{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-bottom:18px}
.phtitle{font-family:'Archivo';font-weight:900;font-size:clamp(46px,9vw,108px);line-height:.85;letter-spacing:-.03em;text-transform:uppercase}
.phtitle .ch{display:inline-block;transform:translateY(112%);opacity:0}
.phsub{margin-top:20px;font-size:clamp(16px,2vw,20px);max-width:54ch;color:var(--ink-soft)}
.phright{display:flex;justify-content:center}
.phright .stamp{position:relative;width:min(200px,90%);color:var(--stamp)}

/* section header */
.mhead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.mhead h2{font-family:'Archivo';font-weight:800;font-size:clamp(26px,4.4vw,46px);letter-spacing:-.02em;text-transform:uppercase}
.mhead .meta{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;color:var(--muted);text-transform:uppercase;text-align:right}

/* CTA buttons */
.cta{display:inline-flex;align-items:center;gap:8px;margin-top:26px;font-family:'Space Mono',monospace;font-size:13px;
  letter-spacing:.14em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:17px 34px;border-radius:4px;
  transition:transform .25s var(--ease),background .25s;cursor:pointer;border:0}
.cta:hover{transform:translate(-2px,-2px);background:var(--stamp)}
.cta.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);margin-left:12px}
.cta.ghost:hover{background:var(--ink);color:var(--paper)}
.cta .arr{transition:transform .25s}.cta:hover .arr{transform:translateX(4px)}

/* ship / big panel */
.ship{border:1.5px solid var(--ink);background:var(--paper2);box-shadow:8px 8px 0 rgba(44,38,30,.14);
  padding:clamp(26px,5vw,52px);position:relative;overflow:hidden}
.ship h2{font-family:'Archivo';font-weight:900;font-size:clamp(34px,6vw,64px);line-height:.92;letter-spacing:-.03em;text-transform:uppercase}
.ship p{font-size:clamp(16px,1.9vw,18px);max-width:50ch;margin-top:14px;color:var(--muted)}
.ship .ctas{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Footer ---------- */
footer{padding:30px clamp(18px,4vw,46px);max-width:var(--maxw);margin:0 auto}
.barcode{display:flex;gap:2px;align-items:flex-end;height:42px;margin-bottom:14px}
.barcode i{display:block;background:var(--ink);height:60%;transform:scaleY(0);transform-origin:bottom;transition:transform .5s}
footer.in .barcode i{transform:scaleY(1)}
.frow{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:'Space Mono',monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Reveal animations ---------- */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}.rv.d4{transition-delay:.28s}
.stmp{opacity:0;transform:scale(1.6) rotate(var(--rot,0deg));transition:opacity .3s,transform .45s var(--ease-pop)}
.stmp.in{opacity:.86;transform:scale(1) rotate(var(--rot,0deg))}
.drop{opacity:0;transform:translateY(-30px) rotate(var(--rot,0deg))}
.drop.in{opacity:1;transform:translateY(0) rotate(var(--rot,0deg));transition:opacity .6s,transform .8s var(--ease-pop)}
/* L/R slide-in for variety */
.slide-l{opacity:0;transform:translateX(-40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.slide-r{opacity:0;transform:translateX(40px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.slide-l.in,.slide-r.in{opacity:1;transform:none}

/* ============================================================
   NEW — enhanced visual richness (motion + graphics)
   ============================================================ */

/* ---------- 3D tilt cards ---------- */
.tilt{transform-style:preserve-3d;transition:transform .25s var(--ease),box-shadow .3s;will-change:transform}
.tilt:hover{box-shadow:var(--shadow-lg)}
.tilt .pop{transform:translateZ(40px)}
@media(pointer:coarse){.tilt{transform:none!important}}

/* ---------- Parallax layers ---------- */
.px{will-change:transform}

/* ---------- Big stat (animated numbers) ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:18px;margin-top:26px}
.statbig{padding:26px 24px;position:relative;overflow:hidden}
.statbig .n{font-family:'Archivo';font-weight:900;font-size:clamp(40px,6vw,72px);line-height:1;letter-spacing:-.03em;color:var(--stamp)}
.statbig .n .unit{font-size:.42em;color:var(--ink);margin-left:2px}
.statbig .lab2{margin-top:8px;font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.statbig .tick{position:absolute;right:14px;top:14px;color:var(--stamp);opacity:.5}

/* ---------- Icon chip (custom SVG icons in paper look) ---------- */
.ichip{width:48px;height:48px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:10px;
  background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 rgba(44,38,30,.14)}
.ichip svg{width:24px;height:24px}
.ichip.stamp{color:var(--stamp);border-color:var(--stamp)}
.ichip.teal{color:var(--teal);border-color:var(--teal)}

/* ---------- Image frame (stamped photo) ---------- */
.frame{position:relative;background:var(--paper2);padding:12px;border:1px solid var(--line);box-shadow:var(--shadow)}
.frame img{width:100%;height:100%;object-fit:cover}
.frame .ftag{position:absolute;top:10px;left:10px;background:var(--stamp);color:var(--paper);
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:4px 9px;z-index:2}
.frame.polaroid{transform:rotate(-2deg)}
.frame.tilt-hover{transition:transform .35s var(--ease),box-shadow .35s}
.frame.tilt-hover:hover{transform:rotate(0deg) scale(1.02);box-shadow:var(--shadow-lg)}

/* ---------- Gallery grid (case studies / BO stills) ---------- */
.gal{display:grid;gap:14px;margin-top:24px}
.gal.c2{grid-template-columns:repeat(2,1fr)}
.gal.c3{grid-template-columns:repeat(3,1fr)}
.gal.c4{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.gal.c2,.gal.c3,.gal.c4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gal.c2,.gal.c3,.gal.c4{grid-template-columns:1fr}}
.gal .gi{overflow:hidden;position:relative;aspect-ratio:4/3}
.gal .gi img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.gal .gi:hover img{transform:scale(1.06)}
.gal .gi .cap{position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(0,0,0,.6));color:var(--paper);
  font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:20px 12px 10px}

/* ---------- Video frame ---------- */
.vid{position:relative;overflow:hidden;border:1.5px solid var(--ink);box-shadow:var(--shadow);background:var(--ink)}
.vid video,.vid img{width:100%;display:block}
.vid .badge{position:absolute;top:12px;left:12px;background:var(--stamp);color:var(--paper);
  font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;padding:5px 10px;
  display:flex;align-items:center;gap:6px;z-index:2}
.vid .badge .rec{width:8px;height:8px;background:var(--paper);border-radius:50%;animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.3}}

/* ---------- Content warning ---------- */
.cw{border:1.5px dashed var(--stamp);background:var(--stamp-glow);padding:16px 20px;border-radius:6px;
  font-size:14px;color:var(--ink);display:flex;gap:12px;align-items:flex-start}
.cw .ico{flex:none;width:26px;height:26px;color:var(--stamp)}

/* ---------- Timeline (story / journey) ---------- */
.tl{position:relative;margin-top:30px;padding-left:28px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;
  background:repeating-linear-gradient(var(--stamp) 0 6px,transparent 6px 12px)}
.tl .tev{position:relative;padding:0 0 28px}
.tl .tev::before{content:"";position:absolute;left:-26px;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--paper);border:2.5px solid var(--stamp)}
.tl .tev .yr{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.16em;color:var(--stamp);text-transform:uppercase}
.tl .tev h3{font-family:'Archivo';font-weight:800;font-size:clamp(18px,2.2vw,24px);letter-spacing:-.01em;text-transform:uppercase;margin:4px 0 6px}
.tl .tev p{font-size:14.5px;color:var(--muted);max-width:60ch}

/* ---------- 3D model-viewer stage ---------- */
model-viewer{width:100%;height:min(440px,60vh);--poster-color:var(--ink);background:var(--ink);
  border:1.5px solid var(--ink);border-radius:8px;box-shadow:var(--shadow)}

/* ---------- Section spacing helper ---------- */
section{scroll-margin-top:84px}

/* ---------- Focus / a11y ---------- */
a:focus-visible,button:focus-visible,.cta:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--stamp);outline-offset:3px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Postage stamp image (perforated edge look) ---------- */
.stampimg{position:relative;display:block;width:100%;max-width:240px;margin:0 auto;
  background:var(--paper2);padding:0;box-shadow:0 12px 26px rgba(44,38,30,.22);
  transform:rotate(var(--rot,0deg));transition:transform .4s var(--ease-pop)}
.stampimg:hover{transform:rotate(0deg) scale(1.03)}
.stampimg img{display:block;width:100%;height:auto}
/* dashed postal cancellation line across stamp */
.stampimg::after{content:"";position:absolute;left:-12%;right:-12%;top:48%;height:2px;
  background:repeating-linear-gradient(90deg,var(--stamp) 0 8px,transparent 8px 14px);
  transform:rotate(-14deg);opacity:.5;pointer-events:none}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv,.stmp,.drop,.slide-l,.slide-r{opacity:1!important;transform:none!important}
  .tapebar .tk,#box .prompt,.vid .badge .rec{animation:none!important}
  body{animation:none!important}
  /* with motion off, skip the unboxing entirely */
  #box{animation:none!important;opacity:0!important;visibility:hidden!important}
  #box .wax{display:none}
}