.brand-hero {
  --brand-hero-tilt-x: 0deg;
  --brand-hero-tilt-y: 0deg;
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at top left, rgba(64, 87, 220, 0.18), transparent 55%),
              radial-gradient(circle at bottom right, rgba(196, 104, 214, 0.2), transparent 60%),
              rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-xl, 26px);
  box-shadow: 0 24px 60px rgba(63, 71, 153, 0.12);
  transform: perspective(1400px) rotateX(var(--brand-hero-tilt-y)) rotateY(var(--brand-hero-tilt-x));
  transition: transform 400ms ease;
}

.brand-hero.is-interacting {
  transition: transform 120ms ease-out;
}

.brand-hero::before {
  content: "";
  position: absolute;
  inset: -35% 45% 20% -15%;
  background: radial-gradient(circle at center, rgba(64, 87, 220, 0.3), transparent 60%);
  filter: blur(40px);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 600ms ease, transform 700ms ease;
  pointer-events: none;
}

.brand-hero::after {
  content: "";
  position: absolute;
  inset: -40% -10% auto 45%;
  height: 280px;
  background: conic-gradient(from 120deg, rgba(255, 255, 255, 0.45), transparent 70%);
  filter: blur(12px);
  opacity: 0.7;
  pointer-events: none;
  animation: heroGlow 16s linear infinite;
}

.brand-hero.is-visible::before {
  opacity: 0.75;
  transform: scale(1);
}

.brand-hero__media {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-hero__logo {
  width: 100%;
  max-width: 220px;
  object-fit: contain;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
  box-shadow: var(--shadow-sm);
  animation: floatUp 6s ease-in-out infinite;
}

[data-brand-logo-img][hidden],
[data-brand-logo-fallback][hidden] {
  display: none !important;
}

.brand-hero__placeholder {
  width: 100%;
  max-width: 220px;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  border-radius: var(--radius-md);
  border: 1px dashed color-mix(in srgb, var(--color-border) 85%, transparent);
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.brand-hero__content {
  display: grid;
  gap: 1.1rem;
}

.brand-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.brand-hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill, 999px);
  background: rgba(64, 87, 220, 0.12);
  color: var(--color-primary-dark);
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
}

.brand-hero.is-visible .brand-hero__chip {
  animation: chipPop 520ms cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.brand-hero.is-visible .brand-hero__chip:nth-child(2) {
  animation-delay: 80ms;
}

.brand-hero.is-visible .brand-hero__chip:nth-child(3) {
  animation-delay: 160ms;
}

.brand-hero.is-visible .brand-hero__chip:nth-child(4) {
  animation-delay: 240ms;
}

.brand-hero__chip::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

.brand-hero__intro {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-text-muted);
  text-align: justify;
  text-justify: inter-word;
}

[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 500ms ease, transform 600ms ease;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

.brand-story .brand-section__body p {
  margin-top: 0;
}

.brand-section__header {
  position: relative;
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
}

.brand-section__header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 64px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(64, 87, 220, 0.65), rgba(196, 104, 214, 0.75));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms ease 120ms;
}

.page-section.is-visible .brand-section__header::after {
  transform: scaleX(1);
}

.brand-section__title {
  margin: 0;
  font-size: clamp(1.45rem, 2.8vw, 1.9rem);
}

.brand-section__subtitle {
  margin: 0.35rem 0 0;
  color: var(--color-text-muted);
}

.brand-section__body {
  color: var(--color-text-muted);
  line-height: 1.75;
  display: grid;
  gap: 1.35rem;
  max-width: 72ch;
  text-align: justify;
  text-justify: inter-word;
}

.brand-section__body p {
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
}

.brand-carousel {
  position: relative;
  overflow: hidden;
}

.brand-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), transparent 20%, transparent 80%, rgba(255, 255, 255, 0.95));
  z-index: 1;
}

.brand-carousel .carousel {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in srgb, var(--color-border) 80%, transparent);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.5rem, 4vw, 2rem) clamp(1rem, 2vw, 1.5rem);
}

.slides {
  display: flex;
  gap: clamp(1rem, 3vw, 1.5rem);
  transition: transform 0.6s ease;
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.slide {
  flex: 0 0 calc(33.333% - clamp(0.5rem, 2vw, 1rem));
  display: flex;
  justify-content: center;
  scroll-snap-align: start;
}

.parfum-card--brand {
  min-height: auto;
  padding-top: clamp(2rem, 4vw, 2.8rem);
  gap: clamp(0.6rem, 1.6vw, 0.9rem);
}

.parfum-card--brand .perfume-card__logo {
  top: clamp(0.6rem, 1.2vw, 0.85rem);
  right: clamp(0.6rem, 1.4vw, 1rem);
  width: clamp(34px, 5vw, 44px);
  height: clamp(34px, 5vw, 44px);
  padding: 0.35rem;
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
}

/* Staff media tools */
.staff-media-toggle {
  --admin-primary: var(--color-primary, #4338CA);
  --admin-primary-strong: color-mix(in srgb, var(--color-primary, #4338CA) 80%, #312E81 20%);
  --admin-on-primary: #ffffff;
  position: fixed;
  top: clamp(4.25rem, 6vw, 6rem);
  right: clamp(0.75rem, 4vw, 2.25rem);
  z-index: 120;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--admin-primary-strong) 55%, transparent);
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  cursor: pointer;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
  transition: transform 160ms ease, box-shadow 200ms ease, background 160ms ease;
}

.staff-media-toggle:hover,
.staff-media-toggle:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 22px 46px rgba(15, 23, 42, 0.22);
  background: var(--admin-primary-strong);
}

.staff-media-toggle:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--admin-primary) 50%, #ffffff 35%);
  outline-offset: 3px;
}

.staff-media-toggle.is-active {
  background: var(--admin-primary-strong);
}

.staff-media-actions {
  --admin-primary: var(--color-primary, #4338CA);
  --admin-primary-strong: color-mix(in srgb, var(--color-primary, #4338CA) 80%, #312E81 20%);
  --admin-surface: rgba(248, 250, 252, 0.96);
  --admin-border: color-mix(in srgb, var(--admin-primary) 48%, rgba(99, 102, 241, 0.32));
  position: fixed;
  top: clamp(6rem, 9vw, 8.5rem);
  right: clamp(1rem, 4vw, 2.75rem);
  width: min(360px, calc(100vw - 2.5rem));
  padding: 1.25rem;
  border-radius: 1rem;
  border: 1px dashed var(--admin-border);
  background: var(--admin-surface);
  color: var(--color-text, #0f172a);
  display: grid;
  gap: 1rem;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(9px);
  z-index: 115;
}

.staff-media-actions[hidden] {
  display: none !important;
}

.staff-media-actions__section {
  display: grid;
  gap: 0.75rem;
}

.staff-media-actions__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.staff-media-actions__title {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.staff-media-actions__btn {
  border: 1px solid color-mix(in srgb, var(--admin-primary-strong) 60%, transparent);
  background: var(--admin-primary);
  color: var(--admin-on-primary);
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.staff-media-actions__btn:not([disabled]):hover,
.staff-media-actions__btn:not([disabled]):focus-visible {
  background: var(--admin-primary-strong);
  box-shadow: 0 8px 20px rgba(67, 56, 202, 0.18);
}

.staff-media-actions__btn[disabled] {
  background: rgba(226, 232, 240, 0.9);
  color: rgba(71, 85, 105, 0.8);
  border-color: rgba(203, 213, 225, 0.8);
  cursor: not-allowed;
  box-shadow: none;
}

.staff-media-actions__drop-zone {
  border: 2px dashed color-mix(in srgb, var(--admin-primary) 65%, rgba(99, 102, 241, 0.4));
  border-radius: 0.85rem;
  padding: 1.25rem;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--admin-primary-strong) 55%, var(--color-text-muted, #64748b));
  background: rgba(99, 102, 241, 0.06);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.staff-media-actions__drop-zone:hover,
.staff-media-actions__drop-zone:focus-visible {
  border-color: color-mix(in srgb, var(--admin-primary-strong) 80%, rgba(99, 102, 241, 0.3));
  background: rgba(99, 102, 241, 0.12);
  color: var(--admin-primary-strong);
  box-shadow: 0 16px 34px rgba(99, 102, 241, 0.16);
  outline: none;
}

.staff-media-actions__drop-zone.is-dragover {
  border-color: var(--admin-primary-strong);
  background: rgba(99, 102, 241, 0.18);
  color: var(--admin-primary-strong);
  box-shadow: 0 18px 40px rgba(99, 102, 241, 0.25);
}

.staff-media-actions__drop-instruction {
  pointer-events: none;
}

.staff-media-actions__feedback {
  font-size: 0.85rem;
  color: var(--color-text-muted, #475569);
  min-height: 1.2rem;
}

.staff-media-actions__feedback--error {
  color: #b91c1c;
}

@media (max-width: 900px) {
  .staff-media-toggle {
    top: auto;
    bottom: 1.5rem;
  }

  .staff-media-actions {
    top: auto;
    bottom: clamp(3.5rem, 10vw, 5.5rem);
    right: clamp(0.75rem, 4vw, 1.5rem);
    width: min(100%, 400px);
  }
}

.parfum-card--brand .perfume-card__link {
  gap: 0.85rem;
  width: 100%;
}

.parfum-card--brand .perfume-card__image,
.parfum-card--brand .perfume-card__placeholder {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-sm);
}

.parfum-card--brand .perfume-card__image {
  transition: transform 400ms ease;
}

.parfum-card--brand .perfume-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed color-mix(in srgb, var(--color-border) 80%, transparent);
  color: var(--color-text-muted);
}

.parfum-card--brand .perfume-card__name {
  font-size: 1.05rem;
}

.parfum-card--brand .perfume-card__link:hover .perfume-card__image,
.parfum-card--brand .perfume-card__link:focus-visible .perfume-card__image {
  transform: translateY(-6px);
}

.nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-border) 75%, transparent);
  border-radius: 999px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--transition-base), transform var(--transition-base);
  z-index: 2;
}

.nav:hover,
.nav:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 15%, white 85%);
  transform: translateY(-50%) scale(1.05);
}

.prev { left: 1rem; }
.next { right: 1rem; }

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  gap: 1.75rem;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0.75rem;
  width: 2px;
  background: color-mix(in srgb, var(--color-border) 70%, transparent);
  opacity: 0.75;
}

.timeline__item {
  position: relative;
  padding-left: 2.5rem;
}

.timeline__marker {
  position: absolute;
  top: 0.2rem;
  left: 0.3rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 20%, transparent);
  animation: pulse 2.5s ease-in-out infinite;
}

.timeline__date {
  font-weight: 600;
  color: var(--color-primary-dark);
}

.timeline__title {
  margin: 0.25rem 0 0.5rem;
  font-size: 1.1rem;
}

.timeline__description {
  margin: 0;
  color: var(--color-text-muted);
  text-align: justify;
  text-justify: inter-word;
}

.anecdotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.anecdotes__item {
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.anecdotes__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.anecdotes__text {
  margin: 0;
  color: var(--color-text-muted);
  text-align: justify;
  text-justify: inter-word;
}

.anecdotes__item:hover,
.anecdotes__item:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(64, 87, 220, 0.12);
}

@media (max-width: 900px) {
  .brand-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .brand-hero__media {
    order: -1;
  }

  .brand-hero__logo,
  .brand-hero__placeholder {
    max-width: 180px;
    margin: 0 auto;
  }

  .brand-hero__meta {
    justify-content: center;
  }

  .slide {
    flex: 0 0 calc(50% - clamp(0.5rem, 2vw, 1rem));
  }
}

@media (max-width: 640px) {
  .slide {
    flex: 0 0 100%;
  }

  .nav {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-hero,
  .brand-hero::before,
  .brand-hero::after,
  .brand-hero__logo,
  .brand-hero__chip,
  .timeline__marker,
  [data-animate] {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
  }
}

@keyframes heroGlow {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.05);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes chipPop {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.9);
  }
  60% {
    opacity: 1;
    transform: translateY(-2px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes floatUp {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 20%, transparent);
  }
  50% {
    box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-primary) 18%, transparent);
  }
}