/* ============================================================
   ADiVero Atelier — shared styles
   ============================================================ */
:root{
  --paper:#F4F5F4; --panel:#FFFFFF; --ink:#15161A; --ink2:#3C3F44;
  --mute:#7A7E84; --line:#E4E5E3; --clay:#B85C3C; --clay-deep:#9C4A2E; --clay-tint:#EBDBD2;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:90px; }
html,body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',system-ui,sans-serif; overflow-x:hidden; }
::selection{ background:var(--clay); color:#fff; }
img{ display:block; }

.font-serif{ font-family:'Instrument Serif',Georgia,serif; font-weight:400; }
.font-mono{ font-family:'Space Mono',monospace; }
.eyebrow{ font-family:'Space Mono',monospace; letter-spacing:.26em; text-transform:uppercase; font-size:11px; }

/* paper grain */
.grain::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.03; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- NAV ---------- */
.nav-scrolled{ background:rgba(244,245,244,.82); backdrop-filter:blur(14px); border-color:var(--line)!important; }
.link-underline{ background-image:linear-gradient(var(--clay),var(--clay)); background-size:0 1px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .4s ease; }
.link-underline:hover,.link-underline.is-active{ background-size:100% 1px; }
.is-active{ color:var(--ink); }

/* ---------- BUTTONS ---------- */
.btn-clay{ transition:transform .35s cubic-bezier(.16,.84,.31,1), box-shadow .35s ease, background .3s ease; }
.btn-clay:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(184,92,60,.55); }

/* ---------- HERO VIDEO ---------- */
.hero-video{
  position:absolute; top:300px; left:0; right:0; bottom:0;     /* inset: auto 0 0 0 + top:300px */
  width:100%; height:auto; min-height:0; object-fit:cover; opacity:0; z-index:0;
}
@media (max-width:1024px){ .hero-video{ top:230px; } }
@media (max-width:640px){ .hero-video{ top:200px; } }

/* ---------- TEXT REVEAL ---------- */
.reveal-line{ display:block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.06em; }
.reveal-line > span{
  display:block; transform:translateY(120%); opacity:0; filter:blur(6px);
  transition:transform 1.05s cubic-bezier(.16,.84,.31,1), opacity .9s ease, filter 1s ease;
}
body.loaded .reveal-line > span{ transform:translateY(0); opacity:1; filter:blur(0); }
body.loaded .d1{ transition-delay:.12s } body.loaded .d2{ transition-delay:.28s }
body.loaded .d3{ transition-delay:.44s } body.loaded .d4{ transition-delay:.6s }

.fade-up{ opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s cubic-bezier(.16,.84,.31,1); }
body.loaded .fade-up{ opacity:1; transform:none; }
body.loaded .fu1{ transition-delay:.5s } body.loaded .fu2{ transition-delay:.65s } body.loaded .fu3{ transition-delay:.8s }

/* ---------- SCROLL REVEAL ---------- */
.obs{ opacity:0; transform:translateY(34px); transition:opacity 1s ease, transform 1s cubic-bezier(.16,.84,.31,1); }
.obs.in{ opacity:1; transform:none; }
.obs-d1{ transition-delay:.08s } .obs-d2{ transition-delay:.16s } .obs-d3{ transition-delay:.24s }
.obs-d4{ transition-delay:.32s } .obs-d5{ transition-delay:.4s } .obs-d6{ transition-delay:.48s }

/* ---------- MARQUEE ---------- */
.marquee{ display:flex; width:max-content; animation:scrollx 50s linear infinite; }
.marquee:hover{ animation-play-state:paused; }
@keyframes scrollx{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- KEN BURNS ---------- */
.kenburns{ animation:kb 20s ease-in-out infinite alternate; }
@keyframes kb{ from{transform:scale(1.03)} to{transform:scale(1.14)} }

/* ---------- JOURNEY CAROUSEL ---------- */
.carousel{ display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding-bottom:6px; scrollbar-width:none; }
.carousel::-webkit-scrollbar{ display:none; }
.carousel > *{ scroll-snap-align:start; flex:0 0 auto; }

/* ---------- CATEGORY CARDS (home) ---------- */
.cat-card .cat-img{ transition:transform 1.1s cubic-bezier(.16,.84,.31,1), filter .6s ease; }
.cat-card:hover .cat-img{ transform:scale(1.07); }
.cat-card .cat-overlay{ transition:background .5s ease; }
.cat-card:hover .cat-overlay{ background:rgba(21,22,26,.28); }

/* ---------- GALLERY · framed thumbnails (one-third size) ---------- */
.gal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; }
@media(min-width:640px){ .gal-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px){ .gal-grid{ grid-template-columns:repeat(5,1fr); gap:1.2rem; } }
.gal-cell{ position:relative; }
.gal-card{
  position:relative; display:block; width:100%; padding:6px; border:0; cursor:zoom-in;
  background:#fff; border-radius:5px; box-shadow:0 12px 30px -18px rgba(0,0,0,.45);
  transform-origin:center; will-change:transform;
  transition:transform .45s cubic-bezier(.16,.84,.31,1), box-shadow .45s ease;
}
.gal-frame{ display:block; overflow:hidden; border-radius:3px; background:#fff; aspect-ratio:4/5; }
.gal-card img{ width:100%; height:100%; object-fit:contain; transition:transform .6s cubic-bezier(.16,.84,.31,1); }
.gal-cell:hover{ z-index:30; }
.gal-card:hover{ transform:scale(1.07); z-index:30; box-shadow:0 30px 60px -22px rgba(0,0,0,.5); }
.gal-card:hover img{ transform:scale(1.06); }
.gal-card .gal-hint{ position:absolute; left:50%; bottom:14%; transform:translate(-50%,8px); opacity:0; transition:opacity .4s ease, transform .4s ease; }
.gal-card:hover .gal-hint{ opacity:1; transform:translate(-50%,0); }
.gal-cap{ margin-top:.6rem; }

/* gallery category tabs (bigger, one active at a time) */
.gal-tab{ display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; font-size:15px; font-weight:500; color:var(--ink2); background:#fff; border:1px solid var(--line); border-radius:999px; padding:.62rem 1.2rem; cursor:pointer; transition:background .25s,color .25s,border-color .25s,transform .25s; }
.gal-tab:hover{ border-color:var(--ink); transform:translateY(-1px); }
.gal-tab.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.gal-tab-n{ font-family:'Space Mono',monospace; font-size:11px; opacity:.55; }
.gal-tab.active .gal-tab-n{ opacity:.8; }

/* ---------- LIGHTBOX ---------- */
.lightbox{ position:fixed; inset:0; z-index:80; background:rgba(21,22,26,.93); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .4s ease; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox .lb-img{ transform:scale(.96); transition:transform .5s cubic-bezier(.16,.84,.31,1); }
.lightbox.open .lb-img{ transform:scale(1); }
.lb-btn{ width:48px; height:48px; border-radius:999px; border:1px solid rgba(255,255,255,.22); color:#fff; display:grid; place-items:center; background:transparent; cursor:pointer; transition:background .25s; }
.lb-btn:hover{ background:rgba(255,255,255,.12); }

/* ---------- PILLS / FORM ---------- */
.pill{ transition:background .25s,color .25s,border-color .25s; cursor:pointer; }
.pill.active{ color:#fff; background:var(--ink); border-color:var(--ink); }
input,textarea,select{ font-family:inherit; transition:border-color .3s ease, background .3s ease; }
input:focus,textarea:focus,select:focus{ outline:none; border-color:var(--clay); background:#fff; }

/* ---------- VISUALIZER ---------- */
.vz-stage{ position:relative; width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:4px; background:#1c1d21; touch-action:pan-y; }
@media (max-width:1024px){ .vz-stage{ aspect-ratio:4/3; } }
@media (max-width:640px){
  .vz-stage{ aspect-ratio:auto; height:56vh; min-height:320px; }
  /* roomier tap targets + scrollable thumbnails on phones */
  .vz-thumb{ min-height:54px; }
}
.vz-room{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:filter .35s ease; }
.vz-overlay{ position:absolute; inset:0; pointer-events:none; transition:background .35s ease, opacity .35s ease; }
.vz-wallpaint{ position:absolute; mix-blend-mode:multiply; opacity:.9; pointer-events:none; transition:background .3s ease, opacity .3s ease; }
.vz-guide{ position:absolute; border:1px dashed rgba(255,255,255,.5); pointer-events:none; opacity:0; transition:opacity .3s ease; }
.vz-guide.show{ opacity:1; }
.vz-art{ position:absolute; cursor:grab; touch-action:none; box-shadow:0 18px 40px -14px rgba(0,0,0,.7); transition:box-shadow .3s ease; user-select:none; }
.vz-art:active{ cursor:grabbing; }
.vz-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.vz-dim{ position:absolute; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.05em; color:#fff; background:rgba(21,22,26,.7); padding:2px 6px; border-radius:3px; white-space:nowrap; }
.swatch{ width:30px; height:30px; border-radius:999px; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; transition:transform .2s; }
.swatch:hover{ transform:scale(1.12); }
.swatch.active{ box-shadow:0 0 0 2px var(--clay); transform:scale(1.12); }
.vz-thumb{ cursor:pointer; border:2px solid transparent; border-radius:3px; overflow:hidden; transition:border-color .25s, transform .25s; }
.vz-thumb:hover{ transform:translateY(-2px); }
.vz-thumb.active{ border-color:var(--clay); }
.range{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:3px; background:var(--line); outline:none; }
.range::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:999px; background:var(--clay); cursor:pointer; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
.range::-moz-range-thumb{ width:16px; height:16px; border-radius:999px; background:var(--clay); cursor:pointer; border:2px solid #fff; }

/* ---------- IMAGE PROTECTION ---------- */
/* Prevents drag, text-select highlight, and long-press save on images */
img{
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none; /* iOS long-press menu */
  pointer-events: none;        /* default — parent elements handle clicks */
}
/* Gallery cards and lightbox still need pointer events on the wrapper */
.gal-card, .cat-card, .vz-art, .vz-thumb, .carousel figure a {
  pointer-events: auto;
}
/* Transparent overlay blocks right-click-save on images inside protected zones */
.img-protect{ position:relative; user-select:none; }
.img-protect::after{
  content:''; position:absolute; inset:0; z-index:1;
  pointer-events:auto; /* catches the right-click before img can */
  background:transparent;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal-line>span,.fade-up,.obs{ opacity:1!important; transform:none!important; filter:none!important; }
}