/* ============================================
   OIDES AROMAS — Luxury Editorial Master Finish
   Apple · Aesop · Byredo · Jo Malone · Framer
   ============================================ */

:root {
  --grid-gap: clamp(1.25rem, 2vw, 1.75rem);
  --grid-unit: 8px;
  --prose-width: 36rem;
  --prose-narrow: 28rem;
  --motion-fast: 0.42s;
  --motion-base: 0.68s;
  --motion-slow: 0.96s;
  --motion-stagger: 0.065s;
  --ease-master: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.38, 1);
  --icon-size: 1.375rem;
  --icon-stroke: 1.25;
}

/* ─── Foundation ─── */
.grain {
  opacity: 0.026;
}

.container {
  padding-inline: clamp(1.25rem, 4vw, 2rem);
}

.section {
  padding-block: clamp(120px, 16vw, 180px);
}

.section-header {
  margin-bottom: clamp(3.75rem, 7.5vw, 6rem);
}

.section-title {
  line-height: 1.08;
  letter-spacing: -0.018em;
  font-weight: 400;
  margin-bottom: clamp(1.35rem, 2.5vw, 1.85rem);
}

.section-desc {
  font-size: 1.02rem;
  line-height: 1.9;
  letter-spacing: 0.022em;
  max-width: 32rem;
}

.sobre__text p,
.experiencia__benefits p,
.timeline__content p,
.para-quem__item p,
.memorias__text,
.faq__item p {
  line-height: 1.92;
  letter-spacing: 0.02em;
}

.sobre__lead,
.experiencia__lead {
  font-size: clamp(1.12rem, 1.8vw, 1.22rem);
  line-height: 1.78;
  letter-spacing: 0.012em;
}

/* ─── Icon system (optical alignment) ─── */
.collection-card__icon,
.benefit-icon svg,
.diff-card__icon svg,
.para-quem__icon svg {
  width: var(--icon-size);
  height: var(--icon-size);
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.benefit-icon {
  transition: transform var(--motion-fast) var(--ease-soft);
}

.experiencia__benefits li:hover .benefit-icon {
  transform: scale(1.06);
}

.diff-card__icon,
.para-quem__icon,
.collection-card__icon {
  transition: transform var(--motion-fast) var(--ease-soft), filter var(--motion-fast) var(--ease-soft);
}

.diff-card:hover .diff-card__icon,
.para-quem__item:hover .para-quem__icon {
  transform: scale(1.05);
  filter: drop-shadow(0 2px 6px rgba(221, 195, 148, 0.28));
}

/* ─── Editorial image grade — unified photoshoot ─── */
.editorial-img,
.collection-card__img img,
.destaque-card__img img,
.sobre__image-main img,
.experiencia__glass img,
.instagram__item img,
.cta-final__bg img,
.stat-circle__img img,
.hero__bg-inner .hero__bg-img {
  filter: saturate(0.91) contrast(1.04) brightness(1.02) sepia(0.06);
  transition:
    transform var(--motion-slow) var(--ease-master),
    filter var(--motion-base) var(--ease-soft);
}

.collection-card__img img[src*="aromatizador-farm"],
.collection-card:hover .collection-card__img img[src*="aromatizador-farm"] {
  object-position: center 38%;
}

.collection-card__img img[src*="sabonete-buriti"],
.collection-card:hover .collection-card__img img[src*="sabonete-buriti"] {
  object-position: center 45%;
}

.collection-card__img img[src*="kit-sementes-brasil"],
.collection-card:hover .collection-card__img img[src*="kit-sementes-brasil"] {
  object-position: center 40%;
}

.collection-card__img img[src*="aromatizador-ginger-vanilla"],
.collection-card:hover .collection-card__img img[src*="aromatizador-ginger-vanilla"] {
  object-position: center 45%;
}

.experiencia__glass--secondary img[src*="experiencia-body-splash"],
.experiencia__glass--secondary:hover img[src*="experiencia-body-splash"] {
  object-position: center 38%;
}

.destaque-card__img img[src*="aromatizador-orange-blossom"],
.destaque-card:hover .destaque-card__img img[src*="aromatizador-orange-blossom"] {
  object-position: center 42%;
}

.destaque-card__img img[src*="kit-rose-golden"],
.destaque-card:hover .destaque-card__img img[src*="kit-rose-golden"] {
  object-position: center 45%;
}

.instagram__item img[src*="aromatizador-orange-blossom"],
.instagram__item:hover img[src*="aromatizador-orange-blossom"] {
  object-position: center 42%;
}

.instagram__item img[src*="kit-rose-golden"],
.instagram__item:hover img[src*="kit-rose-golden"] {
  object-position: center 45%;
}

.instagram__item img[src*="kit-sementes-brasil"],
.instagram__item:hover img[src*="kit-sementes-brasil"] {
  object-position: center 40%;
}

.collection-card:hover .collection-card__img img,
.destaque-card:hover .destaque-card__img img,
.sobre__image-main:hover img,
.instagram__item:hover img,
.experiencia__glass:hover img {
  filter: saturate(0.94) contrast(1.06) brightness(1.03) sepia(0.04);
}

/* ─── Grid unification ─── */
.colecoes__grid,
.diferenciais__grid,
.para-quem__grid,
.depoimentos__grid,
.destaques__grid {
  gap: var(--grid-gap);
  align-items: stretch;
}

.collection-card__content {
  min-height: 176px;
  display: flex;
  flex-direction: column;
}

.collection-card__content p {
  flex: 1;
}

.diff-card {
  min-height: 232px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.diff-card p {
  flex: 1;
}

/* ═══════════════════════════════════════════
   HERO — Jo Malone editorial campaign
   ═══════════════════════════════════════════ */
.hero__bg-inner {
  animation: heroBreathe 32s var(--ease-soft) infinite alternate;
}

@keyframes heroBreathe {
  0% { transform: scale(1.06) translate3d(0, 0, 0); }
  100% { transform: scale(1.095) translate3d(-0.35%, -0.25%, 0); }
}

.hero__bg-inner .hero__bg-img {
  object-position: 62% 20%;
}

.hero__grade {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg, rgba(61, 56, 53, 0.55) 0%, rgba(61, 56, 53, 0.12) 38%, transparent 58%),
    linear-gradient(165deg, rgba(183, 196, 211, 0.22) 0%, transparent 45%),
    linear-gradient(0deg, rgba(61, 56, 53, 0.38) 0%, transparent 42%);
  mix-blend-mode: multiply;
}

.hero__light-leak {
  position: absolute;
  top: 5%;
  left: 0;
  width: 48%;
  height: 75%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 25% 35%, rgba(255, 245, 230, 0.11) 0%, transparent 70%);
  animation: lightLeak 14s ease-in-out infinite alternate;
}

@keyframes lightLeak {
  0% { opacity: 0.55; }
  100% { opacity: 0.95; }
}

.hero__overlay {
  background:
    linear-gradient(95deg, rgba(61, 56, 53, 0.68) 0%, rgba(61, 56, 53, 0.15) 40%, rgba(183, 196, 211, 0.18) 100%),
    linear-gradient(180deg, rgba(61, 56, 53, 0.35) 0%, transparent 40%, rgba(61, 56, 53, 0.48) 100%);
}

.hero__vignette {
  background: radial-gradient(ellipse 85% 75% at 38% 46%, transparent 22%, rgba(61, 56, 53, 0.42) 100%);
}

.hero__orb--2 {
  background: radial-gradient(circle, rgba(183, 196, 211, 0.18) 0%, transparent 70%);
}

.hero__orb--3 {
  opacity: 0.85;
}

.hero__content {
  isolation: isolate;
  max-width: 920px;
}

.hero__copy-glow {
  position: absolute;
  top: 48%;
  left: 28%;
  transform: translate(-50%, -50%);
  width: min(640px, 88vw);
  height: 80%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(61, 56, 53, 0.5) 0%, transparent 72%);
  filter: blur(48px);
  opacity: 0.75;
}

.hero__content-inner {
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .hero__content {
    text-align: left;
    margin-inline: 0;
    padding-left: clamp(1rem, 6vw, 4rem);
  }

  .hero__editorial {
    align-items: flex-start;
  }

  .hero__actions {
    justify-content: flex-start;
  }

  .hero__badges {
    justify-content: flex-start;
    gap: 0.5rem 0.625rem;
  }

  .hero__subtitle {
    margin-inline: 0;
  }
}

.hero__title {
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.12),
    0 8px 48px rgba(61, 56, 53, 0.32);
}

.hero__title-line--accent {
  font-weight: 400;
  opacity: 0.96;
}

.hero__subtitle {
  text-shadow: 0 2px 28px rgba(61, 56, 53, 0.28);
  max-width: 32rem;
}

/* ─── Hero trust seals — premium finish ─── */
.hero__badges {
  opacity: 0.92;
}

.hero__badge {
  position: relative;
  overflow: hidden;
}

.hero__badge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.07) 50%, transparent 58%);
  transform: translateX(-120%);
  transition: transform 0.85s var(--ease-master);
  pointer-events: none;
}

.hero__badge:hover::before {
  transform: translateX(120%);
}

.hero__badges .hero__badge:nth-child(1) { transition-delay: 0.02s; }
.hero__badges .hero__badge:nth-child(2) { transition-delay: 0.06s; }
.hero__badges .hero__badge:nth-child(3) { transition-delay: 0.1s; }
.hero__badges .hero__badge:nth-child(4) { transition-delay: 0.14s; }
.hero__badges .hero__badge:nth-child(5) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .hero__badge::before {
    display: none;
  }

  .hero__badge:hover {
    transform: none;
  }

  .hero__badge:hover .hero__badge-icon {
    transform: none;
  }
}

@keyframes lineGlow {
  0% { opacity: 0.45; width: 36px; }
  100% { opacity: 0.95; width: 52px; }
}

.hero__line {
  animation: lineGlow 5s ease-in-out infinite alternate;
}

/* ─── Hero scroll — editorial discretion ─── */
.hero__scroll {
  position: absolute;
  margin-top: auto;
  pointer-events: auto;
}

.hero__scroll::before {
  content: '';
  position: absolute;
  top: -2.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 2rem;
  background: linear-gradient(to bottom, transparent, rgba(221, 195, 148, 0.12));
  opacity: 0.6;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll-dot {
    animation: none;
    opacity: 0.6;
  }
}

/* ─── Buttons — bespoke components ─── */
.btn {
  letter-spacing: 0.17em;
  font-weight: 500;
  min-height: 48px;
  transition:
    transform var(--motion-fast) var(--ease-master),
    box-shadow var(--motion-fast) var(--ease-master),
    background var(--motion-fast) var(--ease-soft),
    color var(--motion-fast) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft),
    filter var(--motion-fast) var(--ease-soft);
}

.btn--primary {
  background: linear-gradient(160deg, #cba09c 0%, var(--rose) 42%, #b0706b 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 -1px 0 rgba(0, 0, 0, 0.04) inset,
    var(--shadow-soft),
    0 5px 18px rgba(205, 133, 128, 0.26);
}

.btn--primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.03);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    var(--shadow-md),
    0 9px 28px rgba(205, 133, 128, 0.32);
}

.btn--primary:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 0.1s;
  box-shadow: 0 2px 8px rgba(205, 133, 128, 0.22);
}

.btn--shine:hover::before {
  animation: btnShine 3.2s var(--ease-master);
}

@keyframes btnShine {
  0% { left: -100%; opacity: 0; }
  15% { opacity: 1; }
  100% { left: 150%; opacity: 0; }
}

.btn--ghost {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset;
  backdrop-filter: blur(16px);
}

.btn--ghost:active,
.btn--outline:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}

.btn--outline {
  letter-spacing: 0.15em;
  border-color: rgba(205, 133, 128, 0.45);
}

.btn--outline:hover {
  box-shadow: 0 4px 20px rgba(205, 133, 128, 0.15);
}

/* ─── Card tilt (CSS variables) ─── */
[data-tilt] {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform-style: preserve-3d;
  transition:
    transform var(--motion-base) var(--ease-master),
    box-shadow var(--motion-base) var(--ease-soft);
}

@media (pointer: fine) {
  .collection-card[data-tilt]:hover,
  .destaque-card[data-tilt]:hover,
  .depoimento-card[data-tilt]:hover {
    transform: perspective(1000px) rotateY(var(--tilt-x)) rotateX(var(--tilt-y)) translateY(-7px);
    box-shadow:
      var(--shadow-elevated),
      0 0 0 1px rgba(221, 195, 148, 0.12),
      0 24px 48px rgba(61, 56, 53, 0.06);
  }
}

/* ═══════════════════════════════════════════
   SECTION RHYTHM — magazine storytelling
   ═══════════════════════════════════════════ */

/* Sobre: assimetria editorial */
#sobre .section-header,
#sobre .sobre__text {
  text-align: left;
}

#sobre .sobre__grid {
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(3.5rem, 8vw, 7rem);
}

#sobre .section-label::before {
  display: none;
}

#sobre .section-label::after {
  width: 40px;
}

/* Coleções: catálogo centrado */
#colecoes .section-header {
  margin-bottom: clamp(4rem, 8vw, 6.5rem);
}

/* Experiência: split invertido */
#experiencia {
  padding-block: clamp(130px, 17vw, 190px);
}

#experiencia .experiencia__grid {
  gap: clamp(4rem, 9vw, 8rem);
}

#experiencia .section-label,
#experiencia .section-title {
  text-align: left;
}

/* Timeline: centralizado */
#como-funciona .section-header {
  text-align: center;
  max-width: 28rem;
  margin-inline: auto;
  padding-left: 0;
}

#como-funciona .timeline {
  margin-inline: auto;
}

/* Destaques: galeria espaçada */
#destaques .destaques__grid {
  gap: clamp(1.75rem, 3vw, 2.5rem);
}

/* Para quem: grid respirado */
#para-quem {
  background: linear-gradient(180deg, var(--off-white) 0%, #f7f1e4 100%);
}

/* Memórias: coluna estreita editorial */
#memorias .memorias__content {
  max-width: var(--prose-narrow);
  position: relative;
}

#memorias .memorias__content::before,
#memorias .memorias__content::after {
  content: '';
  position: absolute;
  top: 10%;
  width: 1px;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(221, 195, 148, 0.35), transparent);
  opacity: 0.5;
}

#memorias .memorias__content::before {
  left: -3rem;
}

#memorias .memorias__content::after {
  right: -3rem;
}

#memorias .section-title {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  line-height: 1.15;
}

/* Instagram: respiro superior */
#instagram {
  padding-top: clamp(130px, 16vw, 170px);
}

/* FAQ: coluna de leitura */
#faq .section-header {
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

/* Dividers */
.section-divider span {
  height: 80px;
  opacity: 0.38;
}

/* ─── Color balance ─── */
.section--alt::before {
  background:
    radial-gradient(ellipse 55% 35% at 18% 85%, rgba(221, 195, 148, 0.09) 0%, transparent 58%),
    radial-gradient(ellipse 45% 45% at 82% 18%, rgba(183, 196, 211, 0.11) 0%, transparent 52%);
}

.header__nav a::after {
  background: var(--gold);
}

.stat-circle__number {
  color: var(--gold);
}

.destaque-card__tag {
  color: var(--warm-gray);
  letter-spacing: 0.22em;
}

.cta-final__overlay {
  background:
    linear-gradient(168deg, rgba(45, 40, 38, 0.74) 0%, rgba(61, 56, 53, 0.92) 52%, rgba(45, 40, 38, 0.78) 100%);
}

.cta-final__bg img {
  filter: brightness(0.55) saturate(0.86) contrast(1.08) sepia(0.1);
  object-position: 58% 42%;
}

.cta-final:hover .cta-final__bg img {
  filter: brightness(0.6) saturate(0.88) contrast(1.08) sepia(0.1);
}

/* ─── Motion — organic, hand-tuned ─── */
.reveal,
.reveal-left,
.reveal-scale {
  transition-duration: var(--motion-slow);
  transition-timing-function: var(--ease-master);
}

.reveal-left {
  transform: translateX(-28px);
}

.reveal-scale {
  transform: scale(0.97);
}

.collection-card,
.destaque-card,
.diff-card,
.depoimento-card,
.para-quem__item,
.instagram__item {
  transition-duration: var(--motion-base);
  transition-timing-function: var(--ease-soft);
}

/* ─── Cursor ─── */
.cursor {
  background: var(--gold);
  mix-blend-mode: normal;
  opacity: 0.8;
  box-shadow: 0 0 12px rgba(221, 195, 148, 0.4);
}

.cursor--hover {
  background: var(--rose);
  opacity: 0.28;
  box-shadow: 0 0 20px rgba(205, 133, 128, 0.25);
}

/* ─── Responsive rhythm ─── */
@media (max-width: 899px) {
  .hero__content {
    text-align: left;
    padding-left: 0;
  }

  .hero__editorial {
    align-items: flex-start;
  }

  .hero__actions,
  .hero__badges {
    justify-content: flex-start;
  }

  .hero__subtitle {
    margin-inline: 0;
  }

  #como-funciona .section-header {
    text-align: center;
    margin-inline: auto;
    padding-left: 0;
  }

  #sobre .sobre__text .section-label,
  #sobre .sobre__text .section-title,
  #experiencia .section-label,
  #experiencia .section-title,
  #memorias .section-label,
  #memorias .section-title {
    text-align: center;
  }

  #sobre .section-label::before {
    display: inline-block;
  }

  #sobre .section-label::after {
    width: 24px;
  }

  #como-funciona .timeline {
    margin-inline: auto;
  }

  #memorias .memorias__content::before,
  #memorias .memorias__content::after {
    display: none;
  }

  .hero__copy-glow {
    left: 50%;
  }
}

@media (min-width: 1600px) {
  :root {
    --container: min(1240px, 78vw);
    --text-xl: clamp(2.3rem, 3.2vw, 3.8rem);
  }

  .hero__title {
    font-size: clamp(2.85rem, 3.8vw, 4.35rem);
  }

  #sobre .sobre__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

@media (min-width: 2200px) {
  :root {
    --container: min(1320px, 70vw);
  }
}

@media (min-width: 3000px) {
  :root {
    --container: min(1440px, 62vw);
  }

  html {
    font-size: 17px;
  }
}

/* ─── Cinematic preloader ─── */
body.is-loading {
  overflow: hidden;
}

.preloader {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

.preloader__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(239, 228, 200, 0.12) 0%, transparent 55%),
    linear-gradient(165deg, #3d3835 0%, #2a2624 42%, #1f1c1a 100%);
}

.preloader__ambient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(205, 133, 128, 0.18) 0%, transparent 42%),
    radial-gradient(circle at 82% 18%, rgba(183, 196, 211, 0.14) 0%, transparent 38%);
  animation: preloaderAmbient 8s ease-in-out infinite alternate;
}

.preloader__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.75rem;
  padding: 2rem;
  text-align: center;
  animation: preloaderIntro 1.4s var(--ease-master) both;
}

.preloader__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.preloader__logo-wrap {
  position: relative;
  animation: preloaderLogo 2.2s var(--ease-master) infinite alternate;
}

.preloader__logo {
  position: relative;
  z-index: 1;
  width: clamp(108px, 18vw, 148px);
  height: auto;
  filter: brightness(1.08) drop-shadow(0 8px 28px rgba(0, 0, 0, 0.35));
}

.preloader__glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle, rgba(221, 195, 148, 0.35) 0%, transparent 68%);
  filter: blur(18px);
  animation: preloaderGlow 3s ease-in-out infinite alternate;
}

.preloader__wordmark {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.preloader__tagline {
  font-family: var(--font-script);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  color: var(--gold);
  opacity: 0.88;
}

.preloader__progress {
  width: min(280px, 72vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}

.preloader__progress-track {
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  position: relative;
}

.preloader__progress-track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: preloaderShimmer 2.4s ease-in-out infinite;
}

.preloader__progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--rose), var(--gold));
  box-shadow: 0 0 12px rgba(221, 195, 148, 0.45);
  transition: width 0.35s var(--ease-soft);
}

.preloader__percent {
  font-family: var(--font-serif);
  font-size: 0.8125rem;
  letter-spacing: 0.32em;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

.preloader__percent-sign {
  opacity: 0.65;
  margin-left: 0.1em;
}

.preloader__curtain {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  background: #1a1816;
  z-index: 3;
  transition: transform 1.1s var(--ease-master);
}

.preloader__curtain--left {
  left: 0;
  transform-origin: left center;
}

.preloader__curtain--right {
  right: 0;
  transform-origin: right center;
}

.preloader__shutter {
  position: absolute;
  inset: 0;
  background: #efe4c8;
  z-index: 4;
  transform: scaleY(0);
  transform-origin: center top;
  transition: transform 0.85s var(--ease-master);
  opacity: 0;
}

.preloader--revealing .preloader__inner {
  animation: preloaderOutro 0.7s var(--ease-master) forwards;
}

.preloader--revealing .preloader__curtain--left {
  transform: translateX(-102%);
}

.preloader--revealing .preloader__curtain--right {
  transform: translateX(102%);
}

.preloader--revealing .preloader__shutter {
  opacity: 1;
  transform: scaleY(1);
  transition-delay: 0.15s;
}

.preloader--done {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

@keyframes preloaderIntro {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes preloaderOutro {
  to {
    opacity: 0;
    transform: translateY(-12px) scale(1.02);
  }
}

@keyframes preloaderLogo {
  from { transform: translateY(0); }
  to { transform: translateY(-4px); }
}

@keyframes preloaderGlow {
  from { opacity: 0.55; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.05); }
}

@keyframes preloaderAmbient {
  from { opacity: 0.75; }
  to { opacity: 1; }
}

@keyframes preloaderShimmer {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  50% { transform: translateX(100%); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .preloader {
    display: none !important;
  }

  .hero__bg-inner,
  .hero__light-leak,
  .hero__line {
    animation: none !important;
  }

  [data-tilt]:hover {
    transform: none !important;
  }
}