/* Mobile composition pass: keep editorial scale without sacrificing Arabic clarity. */
@media (max-width: 900px) {
  .manifesto {
    min-height: 0;
    padding: clamp(88px, 24vw, 118px) max(24px, 7vw) clamp(72px, 19vw, 92px);
    overflow: hidden;
  }

  .manifesto::after {
    top: 19%;
    right: -14%;
    font-size: min(138vw, 590px);
    line-height: .7;
  }

  .manifesto-line,
  .manifesto-line:nth-child(2),
  .manifesto-line:nth-child(3) {
    width: 100%;
    padding: 0;
    overflow: visible;
  }

  .manifesto-line + .manifesto-line {
    margin-top: 4px;
  }

  .manifesto-line span,
  .manifesto-line .accent {
    max-width: 100%;
    font-size: clamp(30px, 8.4vw, 36px) !important;
    line-height: 1.42 !important;
    letter-spacing: -.025em !important;
    white-space: nowrap;
  }

  .manifesto-line .accent {
    font-size: clamp(33px, 9.1vw, 39px) !important;
  }

  .manifesto-foot {
    width: 100%;
    margin-top: clamp(62px, 18vw, 88px);
    padding-top: 24px;
    display: block;
  }

  .manifesto-foot p {
    width: 100%;
    max-width: none;
    margin: 0;
    font-size: 15px;
    line-height: 2;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .manifesto-foot > span {
    display: block;
    margin-top: 26px;
    font-size: 11px;
    line-height: 1.6;
  }

  html[dir="rtl"] .manifesto {
    text-align: right;
  }

  html[dir="rtl"] .manifesto-line span,
  html[dir="rtl"] .manifesto-line .accent {
    font-family: var(--arabic);
    font-weight: 700;
  }

  html[dir="rtl"] .manifesto-foot p {
    direction: rtl;
    text-align: right;
    font-weight: 500;
  }

  html[dir="rtl"] .manifesto-foot > span {
    direction: ltr;
    text-align: right;
  }
}

@media (max-width: 360px) {
  .manifesto {
    padding-inline: 21px;
  }

  html[dir="rtl"] .manifesto-line span,
  html[dir="rtl"] .manifesto-line .accent {
    font-size: 29px !important;
  }

  html[dir="rtl"] .manifesto-line .accent {
    font-size: 32px !important;
  }

  .manifesto-foot p {
    font-size: 14px;
  }
}

/* Mobile hero: keep copy, the full bottle and the scent picker in one clear flow. */
@media (max-width: 900px) {
  .hero,
  html[dir="rtl"] .hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    min-height: 100svh;
    padding: 108px 7vw 26px;
  }
  .hero-copy,
  html[dir="rtl"] .hero-copy { width: 100%; max-width: none; flex: none; }
  .hero h1,
  html[dir="rtl"] .hero h1 { max-width: 100%; font-size: clamp(2.65rem, 11vw, 3.35rem); }
  .hero .intro,
  html[dir="rtl"] .hero .intro { max-width: 32ch; width: 100%; }
  .hero-cta,
  html[dir="rtl"] .hero-cta { max-width: none; margin-top: 20px; }
  .hero-product,
  html[dir="rtl"] .hero-product,
  [dir="ltr"] .hero-product {
    position: relative;
    inset: auto;
    flex: none;
    width: 100%;
    height: clamp(290px, 39svh, 390px);
    margin: 12px auto 8px;
    opacity: 1;
    display: grid;
    place-items: center;
  }
  .hero-product img,
  html[dir="rtl"] .hero-product img {
    width: auto;
    height: 94%;
    max-height: 100%;
    max-width: 70vw;
    align-self: center;
    justify-self: center;
    object-fit: contain;
  }
  .hero-switcher,
  [dir="ltr"] .hero-switcher {
    position: relative;
    inset: auto;
    width: 100%;
    margin-top: auto;
    flex: none;
  }
  .hero-switcher button { text-align: center; }
  .orb-one { width: 88vw; height: 88vw; right: 6vw; top: 35%; }
  .orb-two { width: 64vw; height: 64vw; right: 18vw; top: 42%; }
}
@media (max-width: 390px) {
  .hero,
  html[dir="rtl"] .hero { padding-top: 100px; }
  .hero h1,
  html[dir="rtl"] .hero h1 { font-size: clamp(2.35rem, 10.5vw, 2.65rem); }
  .hero-product,
  html[dir="rtl"] .hero-product { height: clamp(260px, 35svh, 320px); }
}

/* Let the Arabic manifesto wrap within the phone width. */
@media (max-width: 900px) {
  .manifesto,
  html[dir="rtl"] .manifesto {
    height: auto;
    min-height: 0;
    padding: 90px 8vw 80px;
  }
  .manifesto-line,
  .manifesto-line:nth-child(2),
  .manifesto-line:nth-child(3) { width: 100%; padding: 0; overflow: visible; }
  .manifesto-line span,
  .manifesto-line .accent,
  html[dir="rtl"] .manifesto-line span,
  html[dir="rtl"] .manifesto-line .accent {
    display: block;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    font-size: clamp(1.75rem, 7.7vw, 2.4rem) !important;
    line-height: 1.55 !important;
  }
  .manifesto-line + .manifesto-line { margin-top: 8px; }
  .manifesto-foot { margin-top: 56px; }
}

/* Keep the manifesto's close tight on both desktop and phone. */
.manifesto { min-height: 0; padding-top: clamp(90px, 10vw, 180px); padding-bottom: clamp(48px, 5vw, 90px); }
.manifesto-foot { margin-top: clamp(44px, 5vw, 96px); }
@media (max-width: 900px) {
  .manifesto,
  html[dir="rtl"] .manifesto { min-height: 0; padding-top: 84px; padding-bottom: 42px; }
  .manifesto-foot,
  html[dir="rtl"] .manifesto-foot { margin-top: 42px; }
}

/* Anchor the hero bottle above the picker on phones. */
@media (max-width: 900px) {
  .hero,
  html[dir="rtl"] .hero { min-height: max(760px, 100svh); }
  .hero-product,
  html[dir="rtl"] .hero-product,
  [dir="ltr"] .hero-product {
    position: absolute;
    inset: auto 0 83px;
    width: 100%;
    height: clamp(280px, 41svh, 380px);
    margin: 0;
    display: grid;
    place-items: center;
  }
  .hero-product img,
  html[dir="rtl"] .hero-product img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 66vw;
    max-height: 100%;
    align-self: center;
    justify-self: center;
  }
  .hero-switcher,
  [dir="ltr"] .hero-switcher {
    position: absolute;
    left: 7vw;
    right: 7vw;
    bottom: 23px;
    width: auto;
    margin: 0;
  }
}

/* Mobile campaign: a screen-filling image changes as the next chapter arrives. */
.campaign-sequence { display: none; }
@media (max-width: 900px) {
  .story .campaign-frame { display: none; }
  .campaign-sequence {
    display: block;
    position: relative;
    height: 205svh;
    background: #06111a;
  }
  .campaign-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: #06111a;
  }
  .campaign-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .campaign-second { opacity: 0; will-change: opacity; }
  .campaign-pixels {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(12, 1fr);
    pointer-events: none;
  }
  .campaign-pixels span { background: #04101a; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .campaign-pixels { display: none; }
}

/* The bottle should sit inside the halo, at a bounded size. */
@media (max-width: 900px) {
  .hero-product,
  html[dir="rtl"] .hero-product,
  [dir="ltr"] .hero-product {
    top: 35%;
    right: 0;
    bottom: auto;
    left: 0;
    width: 100%;
    height: 88vw;
    margin: 0;
    display: grid;
    place-items: center;
  }
  .hero-product img,
  html[dir="rtl"] .hero-product img {
    width: auto !important;
    height: min(36svh, 350px) !important;
    max-width: 24vw !important;
    max-height: 350px !important;
    min-height: 0;
    object-fit: contain;
    align-self: center;
    justify-self: center;
  }
}

/* Show the entire opened perfume box, including its printed story. */
.package-media { min-height: 0; height: min(78svh, 760px); padding: 28px; background: #fff; }
.package-media img { width: 100%; height: 100%; max-width: 100%; object-fit: contain; }
@media (max-width: 900px) {
  .package-media { min-height: 0; height: auto; aspect-ratio: 4 / 5; padding: 10px; }
  .package-media img { width: 100%; height: 100%; object-fit: contain; }
}

/* Keep the artwork's baked-in wording fully visible on narrow screens. */
@media (max-width: 900px) {
  .campaign-stage::before,
  .campaign-stage::after {
    content: "";
    position: absolute;
    inset: -24px;
    background-position: center;
    background-size: cover;
    filter: blur(18px) brightness(.34);
    transform: scale(1.06);
    pointer-events: none;
  }
  .campaign-stage::before { background-image: url('assets/arvan-collection-mobile.webp'); }
  .campaign-stage::after {
    background-image: url('assets/arvan-reflection-mobile.webp');
    opacity: var(--second-opacity, 0);
  }
  .campaign-stage img { z-index: 1; object-fit: contain; }
  .campaign-pixels { z-index: 2; }
}

/* Blend the poster edges into its matching atmospheric backdrop. */
@media (max-width: 900px) and (orientation: portrait) {
  .campaign-stage::before,
  .campaign-stage::after { filter: blur(24px) brightness(.58); }
  .campaign-stage img {
    top: 50%;
    bottom: auto;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 100svh;
    object-fit: contain;
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 91%, transparent 100%);
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .campaign-stage .campaign-second {
    top: 50%;
    height: auto;
    width: 100%;
    max-height: 100svh;
    object-fit: contain;
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .campaign-stage .campaign-first {
    top: 50%;
    height: auto;
    width: 100%;
    max-height: 100svh;
    object-fit: contain;
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
}

/* Glass treatment for the collection button in the hero only. */
.hero-cta .primary-btn {
  color: #f7f8f8;
  background: rgba(218, 247, 249, .09);
  border: 1px solid rgba(225, 250, 252, .46);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 14px 35px rgba(0,0,0,.16);
}
.hero-cta .primary-btn:hover,
.hero-cta .primary-btn:focus-visible {
  color: #fff;
  background: rgba(46, 204, 216, .22);
  border-color: rgba(235, 255, 255, .8);
}
.hero-cta .primary-btn b { color: var(--accent); }

.primary-btn svg { width: 25px; height: 25px; flex: none; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.hero-cta .primary-btn svg { color: var(--accent); }

@media (max-width: 900px) {
  .hero-cta .primary-btn {
    min-width: 0;
    padding: 12px 17px;
    gap: 13px;
    justify-content: center;
    font-size: 13px;
  }
  .hero-cta .primary-btn svg { width: 21px; height: 21px; }
  .hero-product { z-index: 6; pointer-events: none; }
}