/* ============================================================
   REGALO PRINT — PREMIUM MOTION LAYER (Homepage only)
   Additive on top of tokens/base/components/layout. Never
   overrides existing component contracts — only adds new
   selectors + a handful of new properties on existing ones
   (documented inline where that happens).
   ============================================================ */

/* ---------------------------------------------------------
   Preloader
   --------------------------------------------------------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--ink-950);
}
.preloader__panel {
  position: absolute;
  left: 0; right: 0;
  height: 51%;
  background: var(--ink-950);
}
.preloader__panel--top { top: 0; }
.preloader__panel--bottom { bottom: 0; }
.preloader__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}
.preloader__mark {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  color: var(--paper-050);
}
.preloader__mark em { font-style: italic; color: var(--color-gold); font-weight: 400; }
.preloader__bar {
  width: min(220px, 50vw);
  height: 1px;
  background: var(--line-on-dark);
  position: relative;
  overflow: hidden;
}
.preloader__bar span {
  position: absolute; inset: 0;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left center;
}
.preloader__pct {
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: rgba(251, 248, 242, 0.45);
  font-variant-numeric: tabular-nums;
}
html.is-loading { overflow: hidden; height: 100%; }

/* ---------------------------------------------------------
   Custom cursor (dot + trailing ring + contextual label)
   Layers on top of motion.js's .cursor-dot, which this
   supersedes visually — hidden below, not removed, so a
   failure in premium.js still leaves the simpler dot working.
   --------------------------------------------------------- */
.cursor-dot { display: none; }

.cursor-ring, .cursor-core {
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 999;
}
.cursor-core {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  mix-blend-mode: difference;
}
.cursor-ring {
  width: 30px; height: 30px;
  border: 1px solid rgba(251, 248, 242, 0.75);
  border-radius: 50%;
  mix-blend-mode: difference;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.35s var(--ease-premium), height 0.35s var(--ease-premium),
    border-radius 0.35s var(--ease-premium), background 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.cursor-ring span {
  opacity: 0;
  font-size: 10px;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.2s var(--ease-out);
}
.cursor-ring.is-label {
  width: auto; height: auto; min-width: 64px;
  padding: 0.85em 1.3em;
  border-radius: 999px;
  border-color: transparent;
  background: var(--color-ink);
  mix-blend-mode: normal;
}
.cursor-ring.is-label span { opacity: 1; color: var(--paper-050); }
@media (max-width: 980px), (pointer: coarse) {
  .cursor-ring, .cursor-core { display: none; }
}

/* ---------------------------------------------------------
   Revolution slider (hero)
   --------------------------------------------------------- */
.rev-slider {
  position: relative;
  height: 94vh;
  min-height: 620px;
  max-height: 980px;
  overflow: hidden;
  background: var(--ink-950);
}
.rev-slider__track { position: relative; width: 100%; height: 100%; }

.rev-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-top: var(--space-9);
  padding-bottom: 170px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  z-index: 0;
  transition: opacity 0.9s var(--ease-out), visibility 0s linear 0.9s;
}
.rev-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: opacity 0.9s var(--ease-out), visibility 0s linear 0s;
}
.rev-slide__media { position: absolute; inset: 0; overflow: hidden; }
.rev-slide__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.rev-slide__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(15, 13, 11, 0.9) 0%, rgba(15, 13, 11, 0.66) 40%, rgba(15, 13, 11, 0.22) 70%, rgba(15, 13, 11, 0.05) 100%),
    linear-gradient(0deg, rgba(15, 13, 11, 0.55) 0%, transparent 30%);
}
.rev-slide__content { position: relative; z-index: 1; max-width: 700px; }
.rev-slide__content .eyebrow { color: var(--color-gold); }
.rev-slide__title {
  font-size: var(--fs-5xl);
  font-weight: 400;
  color: var(--paper-050);
  margin-top: var(--space-5);
}
.rev-slide__title em { font-style: italic; color: var(--color-gold); font-weight: 400; }
.rev-slide__title .word { display: inline-block; }
.rev-slide .lede { margin-top: var(--space-6); color: rgba(251, 248, 242, 0.8); max-width: 46ch; }
.rev-slide__cta-row { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-8); flex-wrap: wrap; }
.rev-slide__cta-row .btn-ghost { color: var(--paper-050); }
.rev-slide__cta-row .btn-ghost:hover { color: var(--color-gold); }

.rev-slider__foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  padding-block: var(--space-6) var(--space-7);
}
.rev-slider__foot .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-8); flex-wrap: wrap; }

.rev-slider__trust { display: flex; gap: var(--space-7); }
.rev-slider__trust .stat-item__num { color: var(--color-gold); font-size: var(--fs-xl); }
.rev-slider__trust .stat-item__label { color: rgba(251, 248, 242, 0.65); }

.rev-slider__nav-row { display: flex; align-items: center; gap: var(--space-6); }
.rev-dots { display: flex; gap: var(--space-5); }
.rev-dot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 90px;
  text-align: left;
  opacity: 0.48;
  transition: opacity 0.3s var(--ease-out);
}
.rev-dot.is-active, .rev-dot:hover, .rev-dot:focus-visible { opacity: 1; }
.rev-dot__num { font-family: var(--font-display); font-style: italic; font-size: var(--fs-xs); color: var(--color-gold); }
.rev-dot__label { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--paper-050); white-space: nowrap; }
.rev-dot__bar { display: block; width: 100%; height: 2px; background: rgba(251, 248, 242, 0.22); overflow: hidden; }
.rev-dot__bar i { display: block; height: 100%; width: 100%; background: var(--color-gold); transform: scaleX(0); transform-origin: left center; }

.rev-slider__arrows { display: flex; gap: var(--space-3); flex-shrink: 0; }
.rev-slider__arrows button {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(251, 248, 242, 0.32);
  color: var(--paper-050);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.rev-slider__arrows button:hover { background: var(--paper-050); color: var(--color-ink); border-color: var(--paper-050); }

@media (max-width: 980px) {
  .rev-slider { height: 88vh; min-height: 560px; }
  .rev-slide { padding-bottom: 190px; }
  .rev-slider__trust { display: none; }
}
@media (max-width: 700px) {
  .rev-slide__title { font-size: var(--fs-4xl); }
  .rev-dot__label { display: none; }
  .rev-dot { min-width: 30px; }
  .rev-dots { gap: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) {
  .rev-slide { transition-duration: 0.01ms; }
}

/* ---------------------------------------------------------
   Horizontal parallax scroll — category strip
   --------------------------------------------------------- */
.hscroll__viewport { overflow: hidden; }
.hscroll__track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  padding-inline: var(--gutter);
}
.hscroll__track .cat-card {
  width: min(78vw, 380px);
  flex: none;
}
.hscroll__progress {
  height: 2px;
  background: var(--line-soft);
  margin: var(--space-7) var(--gutter) 0;
}
.hscroll__progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--color-accent);
}
@media (min-width: 901px) {
  .hscroll__track { padding-inline: 0; }
}
@media (max-width: 900px) {
  .hscroll__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .hscroll__viewport::-webkit-scrollbar { height: 4px; }
  .hscroll__viewport::-webkit-scrollbar-thumb { background: var(--line-strong); }
  .hscroll__track .cat-card { scroll-snap-align: start; }
  .hscroll__progress { display: none; }
}

/* ---------------------------------------------------------
   Parallax storytelling — value cards
   --------------------------------------------------------- */
.story__stage { position: relative; }
.story__ghost {
  position: absolute;
  top: 50%; left: -2vw;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(8rem, 22vw, 18rem);
  line-height: 1;
  color: var(--color-ink);
  opacity: 0.04;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.story__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
@media (max-width: 980px) { .story__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .story__list { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   Anatomy of a Print — exploding layer diagram
   --------------------------------------------------------- */
.explode__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-10);
  align-items: center;
}
.explode__legend { margin-top: var(--space-7); display: flex; flex-direction: column; gap: var(--space-3); }
.explode__legend li {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--fs-sm);
  color: rgba(251, 248, 242, 0.68);
  border-top: 1px solid var(--line-on-dark);
  padding-top: var(--space-3);
}
.explode__legend span {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--color-gold);
  font-size: var(--fs-base);
  flex-shrink: 0;
}
.explode__stage {
  position: relative;
  height: clamp(460px, 50vw, 640px);
}
.explode__layer {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(360px, 82%);
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  will-change: transform;
  backface-visibility: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55);
}
.explode__layer:nth-of-type(1) {
  background: linear-gradient(135deg, var(--paper-050), var(--paper-300));
  border: 1px solid var(--line-strong);
}
.explode__layer:nth-of-type(2) {
  background:
    repeating-linear-gradient(45deg, rgba(192, 52, 74, 0.24) 0 6px, rgba(60, 140, 180, 0.16) 6px 12px, rgba(230, 200, 40, 0.14) 12px 18px, rgba(15, 13, 11, 0.2) 18px 24px);
  border: 1px solid rgba(192, 52, 74, 0.45);
}
.explode__layer:nth-of-type(3) {
  /* overflow (not position — .explode__layer is already position:absolute,
     and redeclaring position:relative here silently pulled this one layer
     out of the absolutely-positioned stack into normal document flow,
     which is what was actually throwing off every layer after it) */
  background: linear-gradient(135deg, var(--brass-200), var(--brass-500) 45%, var(--brass-700));
  overflow: hidden;
}
.explode__layer:nth-of-type(3)::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -20%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-18deg);
}
.explode__layer:nth-of-type(4) {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.explode__layer:nth-of-type(5) {
  background: transparent;
  border: 2px dashed var(--color-gold);
  box-shadow: none;
}
.explode__layer-label {
  position: absolute;
  left: var(--space-4);
  bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: 0.6em;
  background: rgba(15, 13, 11, 0.86);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-on-dark);
  padding: 0.55em 0.9em 0.55em 0.7em;
  font-size: var(--fs-xs);
  color: var(--paper-050);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(10px);
  z-index: 2;
}
.explode__layer-label b { font-family: var(--font-display); font-style: italic; color: var(--color-gold); font-weight: 500; }
.explode__layer-label i { color: rgba(251, 248, 242, 0.55); font-style: normal; }
/* Each layer's own box sits in the identical inset:0 footprint as every
   other layer, and every layer is a sibling inside the same preserve-3d
   + perspective scene — a translateZ closer to the camera also scales
   up how far a fixed-offset child (like this label) is projected from
   its own layer's center, and that amplification grows with each
   layer's z. Staggering the labels with large, increasing offsets (the
   first attempt here) fought that amplification and put later labels
   in the wrong order on screen. Alternating sides at one small, shared
   offset avoids the effect entirely — the layers' own translateY (much
   larger, set in premium.js) does the real vertical separation, and it
   scales coherently because it's the same transform being amplified,
   not a value added on top of it. */
.explode__layer:nth-of-type(odd) .explode__layer-label { left: var(--space-4); right: auto; }
.explode__layer:nth-of-type(even) .explode__layer-label { left: auto; right: var(--space-4); }
@media (max-width: 900px) {
  .explode__grid { grid-template-columns: 1fr; }
  .explode__stage { margin-top: var(--space-8); }
}

/* ---------------------------------------------------------
   Vertical column slider — featured products
   --------------------------------------------------------- */
.colslider {
  display: flex;
  gap: 2px;
  height: clamp(420px, 46vw, 580px);
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.colslider__col {
  position: relative;
  flex: 1 1 0;
  min-width: 60px;
  overflow: hidden;
  background: var(--color-ink);
  transition: flex-grow 0.65s var(--ease-premium);
}
.colslider__col:hover,
.colslider__col:focus-within { flex-grow: 4.5; }
.colslider__col-media { position: absolute; inset: 0; }
.colslider__col-media img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.5;
  transform: scale(1.18);
  transition: opacity 0.6s var(--ease-out), transform 0.9s var(--ease-premium), filter 0.6s var(--ease-out);
  filter: saturate(0.75);
}
.colslider__col:hover .colslider__col-media img,
.colslider__col:focus-within .colslider__col-media img {
  opacity: 0.88; transform: scale(1.02); filter: saturate(1);
}
.colslider__col::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 13, 11, 0.1) 0%, rgba(15, 13, 11, 0.35) 55%, rgba(15, 13, 11, 0.92) 100%);
  z-index: 1;
}
.colslider__col-index {
  position: absolute; z-index: 2; top: var(--space-4); left: var(--space-4);
  font-family: var(--font-display); font-style: italic; font-size: var(--fs-sm);
  color: var(--color-gold); opacity: 0.9;
}
.colslider__col-label {
  position: absolute; z-index: 2; left: 50%; bottom: var(--space-5);
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--font-display); font-size: var(--fs-sm);
  color: var(--paper-050); white-space: nowrap;
  opacity: 1; transition: opacity 0.3s var(--ease-out);
}
.colslider__col:hover .colslider__col-label,
.colslider__col:focus-within .colslider__col-label { opacity: 0; }
.colslider__col-detail {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: var(--space-5);
  color: var(--paper-050);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.4s var(--ease-out) 0.08s, transform 0.4s var(--ease-out) 0.08s;
  pointer-events: none;
}
.colslider__col:hover .colslider__col-detail,
.colslider__col:focus-within .colslider__col-detail { opacity: 1; transform: translateY(0); pointer-events: auto; }
.colslider__col-cat { font-size: var(--fs-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(251, 248, 242, 0.62); }
.colslider__col-title { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; margin-top: var(--space-2); white-space: normal; }
.colslider__col-meta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4); gap: var(--space-3); }
.colslider__col-price strong { font-family: var(--font-display); font-size: var(--fs-md); }
.colslider__col-price span { display: block; font-size: var(--fs-xs); color: rgba(251, 248, 242, 0.55); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.colslider__col-cta {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-on-dark-strong);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-out);
}
.colslider__col:hover .colslider__col-cta,
.colslider__col:focus-within .colslider__col-cta { background: var(--color-accent); border-color: var(--color-accent); transform: rotate(45deg); }

/* No base "display" value here on purpose — these only ever set
   display:none; leaving the element's own display type (flex/grid/
   block) alone when it's the visible one. */
@media (max-width: 900px) { .hide-mobile { display: none !important; } }
@media (min-width: 901px) { .hide-desktop { display: none !important; } }

/* ---------------------------------------------------------
   3D coverflow slider — journal
   --------------------------------------------------------- */
.carousel3d-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.carousel3d-head__actions { display: flex; align-items: center; gap: var(--space-6); }
.carousel3d-nav { display: flex; gap: var(--space-3); }
.carousel3d-nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.carousel3d-nav button:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--paper-050); }
.carousel3d-nav button:disabled { opacity: 0.3; pointer-events: none; }

.carousel3d {
  position: relative;
  perspective: 1700px;
  margin-top: var(--space-9);
  padding-block: var(--space-6);
  overflow: hidden;
}
.carousel3d__stage {
  position: relative;
  height: clamp(320px, 34vw, 420px);
  transform-style: preserve-3d;
  touch-action: pan-y;
}
.carousel3d__item {
  position: absolute;
  top: 0; left: 50%;
  width: min(72vw, 340px);
  margin-left: min(-36vw, -170px);
  cursor: pointer;
  will-change: transform;
}
.carousel3d__item .blog-card__media { margin-bottom: var(--space-3); box-shadow: 0 24px 50px -20px rgba(15, 13, 11, 0.35); }
.carousel3d__item:not(.is-active) { filter: saturate(0.7) brightness(0.9); }
.carousel3d__item .blog-card__meta,
.carousel3d__item h3 { transition: opacity 0.35s var(--ease-out); }
.carousel3d__item:not(.is-active) .blog-card__meta,
.carousel3d__item:not(.is-active) h3 { opacity: 0; }

/* ---------------------------------------------------------
   Marquee velocity skew wrapper
   --------------------------------------------------------- */
.marquee__skew { display: block; will-change: transform; }

/* ---------------------------------------------------------
   SEO content section
   --------------------------------------------------------- */
.seo-content__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-10);
  align-items: start;
}
.seo-content__col .body-copy a { color: var(--color-accent); text-decoration: underline; text-underline-offset: 3px; }
.seo-content__col .body-copy a:hover { color: var(--color-accent-strong); }
.seo-content__facts {
  margin-top: var(--space-8);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5) var(--space-6);
}
.seo-content__facts li {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-sm);
  color: var(--color-ink-soft);
  line-height: var(--lh-relaxed);
}
.seo-content__facts strong { display: block; font-family: var(--font-display); font-size: var(--fs-md); color: var(--color-ink); font-weight: 500; margin-bottom: 2px; }
@media (max-width: 900px) {
  .seo-content__grid { grid-template-columns: 1fr; }
  .seo-content__facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .seo-content__facts { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------
   Homepage FAQ
   --------------------------------------------------------- */
.faq-home__grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: var(--space-10);
  align-items: start;
}
.faq-home__intro { position: sticky; top: 130px; }
.faq-home__list .accordion-item:first-child { border-top: 1px solid var(--line-soft); }
.faq-home__q { display: flex; align-items: baseline; gap: var(--space-3); }
.faq-home__num { font-family: var(--font-display); font-style: italic; color: var(--color-accent); flex-shrink: 0; }
@media (max-width: 900px) {
  .faq-home__grid { grid-template-columns: 1fr; }
  .faq-home__intro { position: static; }
}