/* AK × Gaja showroom
   Concept: Tripoli horseshoe-arch windows for browsing; a velvet jewel box for a look, opened.
   Every look is shown as gown + jewelry together (arch + medallion, look plate). */

:root {
  --pearl: #EEE7E9;
  --pearl-2: #E3D9DC;
  --ink: #2B1A24;
  --mauve: #6F5462;
  --velvet: #3A1F2E;
  --velvet-2: #241219;
  --velvet-sheen: #52304A;
  --gold: #C6A36A;
  --gold-line: rgba(198, 163, 106, 0.42);
  --on-velvet: #F4EDEF;
  --on-velvet-dim: #CDBAC2;

  --display: "Bodoni Moda", "Amiri", Georgia, serif;
  --body: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: 16px;
  --header-h: 56px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Horseshoe arch (Tripoli medina): slightly wider swell than its jambs, a soft point at the crown. */
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 133' preserveAspectRatio='none'%3E%3Cpath d='M3 133V58C3 52 .5 47 0 40C0 18 24 4 50 0C76 4 100 18 100 40C99.5 47 97 52 97 58V133Z'/%3E%3C/svg%3E");
  --arch-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 133' preserveAspectRatio='none'%3E%3Cpath d='M3 133V58C3 52 .5 47 0 40C0 18 24 4 50 0C76 4 100 18 100 40C99.5 47 97 52 97 58V133' fill='none' stroke='%23C6A36A' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  color-scheme: light;
}
/* Arabic pages: the look names stay in English, so Latin letters take Bodoni and Arabic falls through to Amiri. */
html[lang="ar"] { --display: "Bodoni Moda", "Amiri", Georgia, serif; }

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 16px); /* anchors land below the fixed header */
}
html.locked { overflow: hidden; }
html.locked body { overscroll-behavior: none; }
body {
  margin: 0;
  background: var(--pearl);
  color: var(--ink);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Hidden means hidden, whatever layout a component sets (e.g. the other pairing's jewelry slide). */
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }
/* Photos that arrive after their frame is on screen fade in instead of popping (cached ones show at once). */
img.is-pending { opacity: 0; }
img.is-revealed { animation: img-in .45s var(--ease) both; }
@keyframes img-in { from { opacity: 0; } }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero :focus-visible, .box :focus-visible, .house :focus-visible, .site-footer :focus-visible, .fab :focus-visible,
.site-header:not(.is-solid) :focus-visible { outline-color: var(--gold); }
.no-hero .site-header :focus-visible { outline-color: var(--ink); }
.card:focus-visible { outline-offset: 6px; border-radius: 16px; } /* a soft frame around the arch card, not a hard box */
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { line-height: 1.35; }

/* ---------- House marks (logos as masks so they take any colour) ---------- */
.mark {
  display: inline-block; flex: none; height: 1em; background-color: currentColor;
  -webkit-mask: var(--mark) center / contain no-repeat; mask: var(--mark) center / contain no-repeat;
}
.mark-ak { --mark: url("../brand/ak-mark.391a2450e9ee.png"); aspect-ratio: 640 / 442; }
.mark-gj { --mark: url("../brand/gj-mark.7e371f8341fd.png"); aspect-ratio: 640 / 490; }

.lockup { display: inline-flex; align-items: center; gap: 12px; direction: ltr; font-size: 26px; }
.lockup .mark-ak { height: 1.22em; }
.lockup .mark-gj { height: .9em; }
.lk-rule { width: 1px; height: 18px; background: var(--gold); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset-inline: 0; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: calc(var(--header-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--gutter) 0;
  color: var(--on-velvet);
  transition: background-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);
}
/* Over a photo: a soft scrim so the marks are always legible, whatever the picture */
.site-header::before {
  content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(36, 18, 25, .62), rgba(36, 18, 25, 0));
  transition: opacity .35s var(--ease);
}
.site-header.is-solid, .no-hero .site-header {
  background: rgba(238, 231, 233, .9);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(43, 26, 36, .08);
}
.site-header.is-solid::before, .no-hero .site-header::before { opacity: 0; }
.brand { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; text-decoration: none; }
.lang, .header-contact {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  font-size: .875rem; text-decoration: none;
}
.lang { justify-self: start; }
.header-contact, .store-badge { justify-self: end; }
.store-badge {
  display: inline-flex; align-items: center; min-height: 36px;
  font-size: .8125rem; text-decoration: none; padding: 6px 12px; border-radius: 999px;
  border: 1px solid currentColor;
}

/* ---------- Hero ---------- */
.hero { position: relative; height: 88vh; height: 88svh; min-height: min(520px, 100svh); overflow: hidden; background: var(--velvet-2); color: var(--on-velvet); }
.hero-media, .hero-frame, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; transform: scale(1.14); transform-origin: 50% 72%; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(36, 18, 25, 0) 50%, rgba(36, 18, 25, .55) 72%, rgba(36, 18, 25, .88) 100%);
}
.hero-copy {
  position: absolute; z-index: 1; inset-inline: 0; bottom: 0;
  padding: 0 var(--gutter) calc(40px + env(safe-area-inset-bottom));
  max-width: 44rem;
}
.hero h1 {
  font-size: clamp(2.4rem, 10vw, 4.4rem); line-height: 1.05; letter-spacing: -.01em; text-wrap: balance;
  font-weight: 500; font-variation-settings: "opsz" 28;
}
html[lang="ar"] .hero h1:not(:lang(en)) { font-size: clamp(2.3rem, 9.5vw, 4.2rem); line-height: 1.6; letter-spacing: 0; font-weight: 400; }
.hero p { margin: 14px 0 24px; max-width: 30rem; color: var(--on-velvet); font-size: 1.0625rem; text-wrap: pretty; }
.hero h1, .hero p { text-shadow: 0 1px 2px rgba(36, 18, 25, .35), 0 2px 22px rgba(36, 18, 25, .55); }
/* A shade that follows the copy, so the text stays legible over bright lace whatever the screen height or copy length */
.hero-copy::before {
  content: ""; position: absolute; z-index: -1; inset: -72px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(36, 18, 25, 0), rgba(36, 18, 25, .5) 72px, rgba(36, 18, 25, .5));
}
.hero-cta {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 4px;
  color: var(--on-velvet); text-decoration: none; font-weight: 500; font-size: 1rem;
}
.hero-cta span, .card-cta span { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 8px; }
.hero-cta::after { content: "↓"; color: var(--gold); }

.hero-jewel {
  position: absolute; z-index: 1; right: 18px; top: calc(var(--header-h) + env(safe-area-inset-top) + 13vh); /* the photo isn't mirrored in Arabic, so neither is its medallion */
  width: 32vw; max-width: 170px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--velvet-2);
  box-shadow: 0 0 0 3px var(--velvet-2), 0 0 0 4px var(--gold-line), 0 18px 34px -12px rgba(0, 0, 0, .6);
}
@media (max-width: 400px) { .hero-jewel { width: 30vw; top: calc(var(--header-h) + env(safe-area-inset-top) + 5vh); right: 5vw; } }
.hero-jewel img { width: 100%; height: 100%; object-fit: cover; object-position: var(--mfocal, 50% 50%); transform: scale(var(--mzoom, 1.6)); transform-origin: var(--mfocal, 50% 50%); }

@media (min-width: 1024px) {
  /* Desktop: an editorial split, the bride framed in the arch, never stretched full-bleed */
  .hero {
    height: auto; min-height: min(100vh, 900px); display: grid; grid-template-columns: 1fr minmax(0, 40%);
    align-items: end; gap: 72px; padding: calc(var(--header-h) + 48px) var(--gutter) 72px;
    background: radial-gradient(90% 80% at 70% 40%, var(--velvet-sheen), var(--velvet) 45%, var(--velvet-2));
  }
  .hero::after { display: none; }
  .hero-media { position: relative; inset: auto; height: auto; grid-column: 2; grid-row: 1; justify-self: center; width: 100%; max-width: 460px; }
  .hero-frame {
    position: relative; inset: auto; display: block; aspect-ratio: 3 / 4; height: auto;
    -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat;
  }
  .hero-media::after {
    content: ""; position: absolute; inset: -10px -10px 0; pointer-events: none;
    background: var(--arch-line) center / 100% 100% no-repeat;
  }
  .hero-media::before { content: ""; position: absolute; inset-inline: -22px; bottom: 0; height: 1px; background: var(--gold-line); }
  .hero-jewel { top: auto; bottom: 16%; right: auto; inset-inline-end: auto; inset-inline-start: -64px; width: 168px; max-width: none; }
  .hero-copy { position: relative; inset: auto; grid-column: 1; grid-row: 1; padding: 0 0 6px; max-width: 38rem; }
  .hero-copy::before { display: none; }
  .hero h1 { font-size: clamp(3rem, 5.2vw, 5.5rem); }
  .hero p { font-size: 1.25rem; }
}
@media (orientation: landscape) and (min-width: 640px) and (max-height: 599px) {
  .hero {
    height: auto; min-height: 100svh; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 40px;
    padding: calc(var(--header-h) + 12px) max(var(--gutter), env(safe-area-inset-right)) 20px max(var(--gutter), env(safe-area-inset-left));
    background: radial-gradient(90% 80% at 70% 40%, var(--velvet-sheen), var(--velvet) 45%, var(--velvet-2));
  }
  .hero::after { display: none; }
  .hero-media { position: relative; inset: auto; height: auto; grid-column: 2; grid-row: 1; width: calc((100svh - var(--header-h) - 48px) * .75); }
  .hero-frame { position: relative; inset: auto; display: block; aspect-ratio: 3 / 4; height: auto; -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; }
  .hero-jewel { top: auto; right: auto; bottom: 12%; inset-inline-start: -36px; width: 92px; max-width: none; }
  .hero-copy { position: relative; inset: auto; grid-column: 1; grid-row: 1; padding: 0; max-width: 30rem; }
  .hero-copy::before { display: none; }
  .hero h1 { font-size: clamp(2.2rem, 5vw, 3rem); }
  .hero p { margin: 8px 0 12px; font-size: 1rem; }
  .hero h1, .hero p { text-shadow: none; }
}

/* ---------- Looks ---------- */
.looks { padding: 56px var(--gutter) 48px; }
.no-hero .looks { padding-top: calc(var(--header-h) + 48px); }
.looks-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.looks-head h2 { font-size: clamp(2rem, 7vw, 3rem); }
.looks-count { margin: 0; color: var(--mauve); font-size: .875rem; }
.looks-intro { margin: 0 0 32px; max-width: 36rem; color: var(--mauve); line-height: 1.75; text-wrap: pretty; }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 40px; }
.card[hidden] { display: none; }
.card { display: flex; flex-direction: column; text-decoration: none; -webkit-tap-highlight-color: transparent; min-width: 0; }

/* The arch window + the jewelry medallion: the complete look at a glance */
.arch { position: relative; display: block; margin: 7px 7px 0; }
.arch::before {
  content: ""; position: absolute; inset: -7px -7px 0; z-index: 1; pointer-events: none;
  background: var(--arch-line) center / 100% 100% no-repeat; opacity: .85;
}
.arch::after { content: ""; position: absolute; inset-inline: -16px; bottom: 0; height: 1px; background: var(--gold-line); }
.frame {
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--pearl-2);
  -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat;
  transition: transform .35s var(--ease);
}
.frame-img, .frame .ph { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.medallion {
  position: absolute; z-index: 2; inset-inline-start: -4px; bottom: -14px; width: 38%; aspect-ratio: 1;
  border-radius: 50%; overflow: hidden; background: var(--velvet-2);
  box-shadow: 0 0 0 3px var(--pearl), 0 0 0 4px var(--gold-line), 0 10px 22px -10px rgba(36, 18, 25, .55);
}
.medallion-img { width: 100%; height: 100%; object-fit: cover; object-position: var(--mfocal, 50% 50%); transform: scale(var(--mzoom, 1.6)); transform-origin: var(--mfocal, 50% 50%); }
.is-light { background: var(--pearl-2) !important; }
.is-light img { mix-blend-mode: multiply; }
.card:active .frame { transform: scale(.985); }
@media (hover: hover) { .card:hover .frame-img { transform: scale(1.035); } }

.card-text { display: flex; flex-direction: column; margin-top: 22px; min-width: 0; }
.card-title { font-family: var(--display); font-size: 1.2rem; line-height: 1.25; text-wrap: balance; }
html[lang="ar"] .card-title:not(:lang(en)) { font-size: 1.3rem; line-height: 1.45; }
.card-meta { margin-top: 3px; font-size: .8125rem; color: var(--mauve); line-height: 1.45; }
.card-price { margin-top: 4px; font-family: "Bodoni Moda", serif; font-size: 1rem; color: var(--ink); font-variant-numeric: lining-nums; }
.card-story, .card-cta { display: none; }

/* Feature: the first look leads, full width */
.card.is-feature { grid-column: 1 / -1; }
.card.is-feature .arch { margin: 9px 9px 0; }
.card.is-feature .frame { aspect-ratio: 4 / 5; }
.card.is-feature .medallion { width: 30%; bottom: -18px; }
.card.is-feature .card-title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
.card.is-feature .card-story { display: block; margin-top: 8px; color: var(--mauve); max-width: 34rem; }
.card-houses { display: none; }
.card.is-feature .card-houses { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin-top: 14px; color: var(--gold); font-size: 22px; direction: ltr; }
.card.is-feature .card-houses .mark-ak { height: 1.2em; }
.card.is-feature .card-houses .mark-gj { height: .88em; }
.card.is-feature .card-cta {
  display: inline-flex; align-self: flex-start; align-items: center; min-height: 44px; margin-top: 6px;
  font-weight: 500; font-size: .9375rem;
}
/* A lone last card spans the row instead of leaving a hole */
.card.span-row { grid-column: 1 / -1; }
.card.span-row:not(.is-feature) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; align-items: center; }
.card.span-row:not(.is-feature) .card-text { margin-top: 0; }

@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; row-gap: 56px; }
  .card.is-feature { display: grid; grid-template-columns: minmax(0, 38%) 1fr; gap: 48px; align-items: center; }
  .card.is-feature .frame { aspect-ratio: 3 / 4; }
  .card.is-feature .card-text { margin-top: 0; }
  .card.span-row { grid-column: auto; }
  .card.span-row:not(.is-feature) { display: flex; }
  .card.span-row:not(.is-feature) .card-text { margin-top: 22px; }
}
@media (min-width: 1200px) { .grid { column-gap: 40px; } }
@media (min-width: 1024px) {
  .card.is-feature .card-text { max-width: 28rem; }
  .card.is-feature .card-title { font-size: 3rem; }
  .card.is-feature .card-story { font-size: 1.125rem; }
  .card.is-feature .card-meta { font-size: .9375rem; }
}

.ph { display: block; background: linear-gradient(160deg, var(--pearl-2), #cdbfc4); }
.empty { color: var(--mauve); max-width: 32rem; }

/* ---------- The two houses ---------- */
.houses { padding: 24px var(--gutter) 64px; }
.houses-head { margin-bottom: 24px; max-width: 36rem; }
.houses-title { font-size: clamp(1.8rem, 6vw, 2.6rem); margin-bottom: 8px; }
.houses-intro { margin: 0; color: var(--mauve); line-height: 1.75; text-wrap: pretty; }
.houses-grid { display: grid; gap: 16px; }
@media (min-width: 768px) { .houses-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
.house {
  position: relative; padding: 32px 26px 28px; border-radius: 22px; color: var(--on-velvet);
  background: radial-gradient(120% 90% at 20% 0%, var(--velvet-sheen), var(--velvet) 50%, var(--velvet-2));
  box-shadow: inset 0 0 0 1px var(--gold-line);
}
.house-arch { position: relative; display: block; width: 58%; max-width: 260px; margin: 8px 8px 26px; }
.house-arch::before { content: ""; position: absolute; inset: -8px -8px 0; z-index: 1; pointer-events: none; background: var(--arch-line) center / 100% 100% no-repeat; }
.house-arch::after { content: ""; position: absolute; inset-inline: -18px; bottom: 0; height: 1px; background: var(--gold-line); }
.house-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat;
}
.house-photo img { width: 100%; height: 100%; object-fit: cover; }
.house-logo { color: var(--gold); font-size: 52px; }
.house-ak .house-logo { font-size: 60px; }
.house-gj .house-logo { font-size: 46px; }
.house-role { margin: 12px 0 0; color: var(--gold); font-size: .875rem; }
.house-about { margin: 8px 0 18px; color: var(--on-velvet-dim); max-width: 32rem; line-height: 1.7; }
.house-more { margin: 0 0 20px; }
.house-more summary {
  display: flex; align-items: center; justify-content: space-between; min-height: 44px; cursor: pointer; list-style: none;
  border-top: 1px solid rgba(244, 237, 239, .12); color: var(--on-velvet); font-size: .9375rem;
}
.house-more summary::-webkit-details-marker { display: none; }
.house-more summary::after {
  content: ""; flex: none; width: 14px; height: 14px; background: var(--gold); transition: transform .2s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.house-more[open] summary::after { transform: rotate(180deg); }
.house-facts { margin: 4px 0 0; display: grid; gap: 10px; }
.house-facts div { display: grid; grid-template-columns: 7.5em 1fr; align-items: baseline; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(244, 237, 239, .1); }
.house-facts dt { color: var(--on-velvet-dim); font-size: .8125rem; }
.house-facts dd { margin: 0; font-size: .9375rem; }
.house-facts a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.house-wa {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px; border-radius: 999px;
  background: var(--on-velvet); color: var(--ink); text-decoration: none; font-weight: 500; font-size: .9375rem;
}
.house-wa .wa-icon { color: inherit; }
.house-gj .house-wa { background: var(--gold); color: var(--velvet-2); }

/* ---------- Footer ---------- */
.site-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  padding: 28px var(--gutter) calc(28px + env(safe-area-inset-bottom));
  background: var(--velvet-2); color: var(--on-velvet-dim); font-size: .875rem;
}
.footer-brand .lockup { color: var(--on-velvet); font-size: 24px; }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.footer-links a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; text-decoration: none; }
.footer-links a:hover { color: var(--on-velvet); }

/* ---------- Floating WhatsApp (only between the hero and the houses) ---------- */
.fab {
  position: fixed; z-index: 15; inset-inline-end: var(--gutter); bottom: calc(18px + env(safe-area-inset-bottom));
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.fab.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab.is-visible.is-tucked { transform: translateY(140%); }
html.locked .fab { opacity: 0; pointer-events: none; }
.fab summary {
  list-style: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--velvet); color: var(--gold); cursor: pointer;
  box-shadow: 0 10px 30px -8px rgba(36, 18, 25, .55), inset 0 0 0 1px var(--gold-line);
}
.fab summary::-webkit-details-marker { display: none; }
.fab-menu {
  position: absolute; bottom: 68px; inset-inline-end: 0; min-width: 230px; padding: 8px;
  border-radius: 18px; background: var(--velvet); color: var(--on-velvet);
  box-shadow: 0 18px 40px -12px rgba(36, 18, 25, .6), inset 0 0 0 1px var(--gold-line);
}
.fab[open] .fab-menu { animation: fab-in .22s var(--ease) both; transform-origin: bottom right; }
[dir="rtl"] .fab[open] .fab-menu { transform-origin: bottom left; }
.fab.is-closing .fab-menu { animation: fab-out .15s ease-in forwards; }
@keyframes fab-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes fab-out { to { opacity: 0; transform: translateY(6px) scale(.97); } }
.fab-head { margin: 6px 10px 6px; font-size: .8125rem; color: var(--on-velvet-dim); }
.fab-menu a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px; min-height: 48px; border-radius: 12px; text-decoration: none; }
.fab-menu a:active, .fab-menu a:hover { background: rgba(255, 255, 255, .07); }
.fab-menu .mark { font-size: 20px; color: var(--gold); }
.fab-menu span:not(.mark) { color: var(--on-velvet-dim); font-size: .875rem; }

/* ---------- The jewel box (look sheet) ---------- */
.box {
  padding: 0; border: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  color: var(--on-velvet);
  background: radial-gradient(130% 70% at 50% 0%, var(--velvet-sheen) 0%, var(--velvet) 42%, var(--velvet-2) 100%);
  height: 100dvh;
  overscroll-behavior: contain;
  overflow: hidden;
  transition: transform .22s var(--ease);
}
.box.is-dragging { transition: none; }
.box::backdrop {
  background: rgba(28, 13, 20, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: var(--drag-fade, 1); transition: opacity .22s var(--ease); /* lightens as the sheet is dragged away */
}
.box.is-dragging::backdrop { transition: none; }
.box[open] { animation: box-open .5s var(--ease) backwards; }
.box[open]::backdrop { animation: fade .4s ease backwards; }
/* Until a shared link's sheet is up, the page beneath stays unpainted (the sheet goes up as the page streams in) */
.is-deeplink-pending { background: var(--velvet); }
.is-deeplink-pending > :not(#look) { visibility: hidden; }
/* A shared link lands straight on the look: it is the first thing painted, so there is nothing to animate from */
.box.is-deeplink[open], .box.is-deeplink[open]::backdrop { animation: none; }
.box.is-dismissed { animation: none; }
.box.is-closing { animation: box-close .18s ease-in forwards; }
.box.is-dismissed::backdrop { animation: fade-out .2s ease-out forwards; }
.box.is-closing::backdrop { animation: backdrop-out .18s ease-in forwards; }
@keyframes backdrop-out { from { opacity: var(--backdrop-from, 1); } to { opacity: 0; } }
@keyframes box-open {
  from { opacity: 0; transform: translateY(28px); clip-path: inset(5% 3% 0 3% round 28px); }
  10% { opacity: 1; } /* solid almost at once, so the page never shows through the rising box */
  to { opacity: 1; transform: none; clip-path: inset(0 round 0); }
}
@keyframes box-close { to { opacity: 0; transform: translateY(16px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.sheet:focus { outline: none; }
.sheet { position: relative; display: flex; flex-direction: column; height: 100%; }
.scroller { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Toolbar: only Close sits on the photo; the title appears once the photo scrolls away */
.toolbar {
  position: absolute; z-index: 4; inset-inline: 0; top: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 12px 18px;
  background: linear-gradient(rgba(36, 18, 25, .5), rgba(36, 18, 25, 0));
  pointer-events: none;
}
/* The solid compact bar is its own layer, so it fades in and out as one piece */
.toolbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(36, 18, 25, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 var(--gold-line); opacity: 0; transition: opacity .25s var(--ease);
}
.toolbar > * { pointer-events: auto; }
.tb-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; flex: none;
  border: 0; text-decoration: none; color: var(--on-velvet);
  background: rgba(36, 18, 25, .42); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .25s var(--ease);
}
.tb-btn:focus:not(:focus-visible) { outline: none; }
.tb-spacer { width: 44px; flex: none; }
.tb-title {
  flex: 1; min-width: 0; padding: 0 12px; text-align: center; font-family: var(--display); font-size: 1.0625rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity .2s;
}
.sheet.is-scrolled .toolbar::before { opacity: 1; }
.sheet.is-scrolled .tb-title { opacity: 1; }
.sheet.is-scrolled .tb-btn { background: transparent; }
[dir="rtl"] .flip { transform: scaleX(-1); }

/* Gallery */
.gallery { position: relative; background: var(--velvet-2); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.slides::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; margin: 0; scroll-snap-align: center; aspect-ratio: 4 / 5; max-height: 72svh; width: 100%; }
.slide[hidden], .dots span[hidden], .plate-jewel[hidden] { display: none; }
.slide > img, .slide > .ph { width: 100%; height: 100%; object-fit: cover; }
/* The look plate: the gown in a large arch (outlined, on a threshold), the chosen jewelry on its corner */
.slide.is-plate {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  padding: calc(60px + env(safe-area-inset-top)) 20px 40px;
  background: radial-gradient(110% 80% at 50% 30%, var(--velvet-sheen), var(--velvet) 55%, var(--velvet-2));
}
.plate-arch { position: relative; display: block; height: 72%; aspect-ratio: 3 / 4; max-width: 74%; }
.plate-arch::before { content: ""; position: absolute; inset: -8px -8px 0; z-index: 1; pointer-events: none; background: var(--arch-line) center / 100% 100% no-repeat; }
.plate-arch::after { content: ""; position: absolute; inset-inline: -20px; bottom: 0; height: 1px; background: var(--gold-line); }
.plate-gown { display: block; width: 100%; height: 100%; -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; }
.plate-gown img, .plate-gown .ph { width: 100%; height: 100%; object-fit: cover; }
.plate-jewel {
  position: absolute; z-index: 2; inset-inline-start: -14%; bottom: 0; width: 46%; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--velvet-2); box-shadow: 0 0 0 3px var(--velvet-2), 0 0 0 4px var(--gold-line), 0 16px 30px -12px rgba(0, 0, 0, .6);
}
/* Switching the jewelry: the new medallion fades in over the old one, which stays solid underneath until it is
   covered; the old name leaves before the new one rises in, so the two never overlap. */
.plate-jewel { z-index: 3; transition: opacity .35s var(--ease); }
.plate-jewel.is-off { z-index: 2; opacity: 0; pointer-events: none; transition: opacity 0s .35s; }
.plate-caption { transition: opacity .28s .12s var(--ease), transform .28s .12s var(--ease); }
.plate-caption.is-off { opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .12s ease-in, transform .12s ease-in; }
.plate-captions { display: grid; justify-items: center; max-width: 88%; }
.plate-captions > * { grid-area: 1 / 1; }
.plate-jewel img { width: 100%; height: 100%; object-fit: cover; object-position: var(--mfocal, 50% 50%); transform: scale(var(--mzoom, 1.6)); transform-origin: var(--mfocal, 50% 50%); }
.plate-caption { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.plate-caption small { font-size: .8125rem; color: var(--gold); }
.plate-caption strong { font-family: var(--display); font-weight: 400; font-size: 1.2rem; color: var(--on-velvet); line-height: 1.3; }
.slide.is-gown > img { width: 100%; height: 100%; object-fit: cover; }
/* Jewelry on a velvet tray (also crops away photo watermarks at the edges) */
/* A jewelry photo is shown whole (the full piece and set): its frame hugs the photo's own shape, as large as the slide
   allows. The slide is a size container, so the photo can be limited by both its width and its height (cqw / cqh). */
.slide.is-jewel { display: grid; place-items: center; padding: calc(68px + env(safe-area-inset-top)) 20px 34px; background: var(--velvet-2); container-type: size; }
.tray { display: block; max-width: 100%; border-radius: 18px; overflow: hidden; position: relative; box-shadow: 0 0 0 1px var(--gold-line); }
.tray img { display: block; width: auto; height: auto; max-width: 100cqw; max-height: 100cqh; transform: scale(var(--zoom, 1)); transform-origin: var(--focal, 50% 50%); }
.dots { position: absolute; bottom: 14px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(244, 237, 239, .45); transition: background-color .2s, transform .2s; }
.dots span.on { background: var(--on-velvet); transform: scale(1.25); }
.g-nav {
  display: none; position: absolute; bottom: 16px; width: 40px; height: 40px; border-radius: 50%; z-index: 2;
  border: 0; cursor: pointer; place-items: center; color: var(--on-velvet); background: rgba(36, 18, 25, .4);
}
.g-prev { inset-inline-start: 18px; }
.g-next { inset-inline-end: 18px; }
@media (hover: hover) and (pointer: fine) { .g-nav { display: grid; } }

/* Detail */
.detail { padding: 28px 22px 36px; }
.look-title { font-size: clamp(2.1rem, 8.5vw, 2.9rem); line-height: 1.08; text-wrap: balance; }
html[lang="ar"] .look-title:not(:lang(en)) { line-height: 1.35; }
.story { margin: 12px 0 0; color: var(--on-velvet-dim); font-size: 1.0625rem; line-height: 1.75; max-width: 34rem; }
.share-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 6px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--gold); font-size: .875rem;
}
.share-link span { text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 4px; }

/* Choose your jewelry: two visual tiles */
.pairing-choice { margin-top: 26px; }
.pairing-heading { font-size: 1.15rem; margin-bottom: 12px; }
.pairing-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 12px; }
@media (min-width: 640px) { .tile-img { width: 100px !important; height: 100px !important; } }
.pairing-tile {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 10px 12px; border-radius: 18px;
  border: 0; cursor: pointer; background: rgba(244, 237, 239, .04); box-shadow: inset 0 0 0 1px rgba(244, 237, 239, .12);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tile-img { display: block; width: 76px; height: 76px; border-radius: 50%; overflow: hidden; background: var(--velvet-2); box-shadow: 0 0 0 2px var(--velvet-2), 0 0 0 3px rgba(244, 237, 239, .2); transition: box-shadow .25s; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--mfocal, 50% 50%); transform: scale(var(--mzoom, 1.6)); transform-origin: var(--mfocal, 50% 50%); }
.tile-name { font-size: .9375rem; color: var(--on-velvet-dim); }
.pairing-tile[aria-pressed="true"] { background: rgba(198, 163, 106, .1); box-shadow: inset 0 0 0 1.5px var(--gold); }
.pairing-tile[aria-pressed="true"] .tile-img { box-shadow: 0 0 0 2px var(--velvet-2), 0 0 0 3.5px var(--gold); }
.pairing-tile[aria-pressed="true"] .tile-name { color: var(--on-velvet); font-weight: 500; }
/* Only what changes with the jewelry fades in; the gown half is the same either way. */
.pairing-pane.is-entering > :not(.half-gown) { animation: pane-in .45s var(--ease); }
@keyframes pane-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The gown / the jewelry */
.half { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--gold-line); }
.half-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.half-head h3 { font-size: 1.45rem; }
.half-mark { color: var(--gold); font-size: 20px; }
.half-photo { display: block; margin: 10px 0 8px; aspect-ratio: 1; max-width: 360px; border-radius: 16px; overflow: hidden; background: var(--velvet-2); box-shadow: 0 0 0 1px var(--gold-line); }
.half-photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transform-origin: 50% 42%; }
.piece { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding: 12px 0; }
.piece + .piece { border-top: 1px solid rgba(244, 237, 239, .08); }
.piece-text { min-width: 0; flex: 1; }
.piece-name { margin: 0; font-weight: 500; font-size: 1.0625rem; }
.piece-desc { margin: 4px 0 0; color: var(--on-velvet-dim); font-size: .9375rem; }
.specs { margin: 10px 0 0; display: grid; gap: 6px; }
.specs div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; }
.specs dt { color: var(--on-velvet-dim); font-size: .8125rem; line-height: 1.6; }
.specs dd { margin: 0; color: var(--on-velvet); font-size: .875rem; line-height: 1.6; }
.piece-price { flex: none; margin: 0; font-family: "Bodoni Moda", serif; color: var(--gold); font-size: 1.1rem; white-space: nowrap; font-variant-numeric: lining-nums; }

.price-summary { margin-top: 18px; display: grid; gap: 10px; }
.total { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--gold-line); border-radius: 14px; }
.total > span { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.total strong { font-family: "Bodoni Moda", serif; font-weight: 500; font-size: 1.35rem; color: var(--gold); text-align: end; }
.total.is-secondary { padding: 10px 18px; border-style: dashed; }
.total.is-secondary strong { font-size: 1.05rem; color: var(--on-velvet-dim); }
.total.is-look { background: rgba(198, 163, 106, .08); }
.saving { font-size: .8125rem; color: var(--gold); }
.money { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 0 .4em; }
.money-old { font-size: .78em; color: var(--on-velvet-dim); opacity: .8; text-decoration-thickness: 1px; }
.money-from { font-family: var(--body); font-size: .72em; color: var(--on-velvet-dim); }
.money.is-request { font-family: var(--body); font-size: .875rem; color: var(--on-velvet-dim); }
.card-price .money { justify-content: flex-start; }
.card-price .money-old, .card-price .money-from { color: var(--mauve); }

/* Next look + keep browsing */
.next-look {
  display: flex; align-items: center; gap: 14px; margin-top: 34px; padding: 14px; border-radius: 18px; text-decoration: none;
  background: rgba(244, 237, 239, .04); box-shadow: inset 0 0 0 1px var(--gold-line);
}
.next-thumb { flex: none; width: 54px; aspect-ratio: 3 / 4; overflow: hidden; -webkit-mask: var(--arch) center / 100% 100% no-repeat; mask: var(--arch) center / 100% 100% no-repeat; }
.next-thumb img { width: 100%; height: 100%; object-fit: cover; }
.next-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.next-text small { color: var(--gold); font-size: .8125rem; }
.next-text strong { font-family: var(--display); font-weight: 400; font-size: 1.25rem; }
.next-look svg { color: var(--gold); flex: none; }
.more { margin-top: 34px; }
.more h3 { font-size: 1.2rem; margin-bottom: 14px; }
.more-row {
  display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
  margin-inline: -22px; padding-inline: 22px; scroll-padding-inline: 22px;
}
.more-row::-webkit-scrollbar { display: none; }
.mini { flex: 0 0 min(34vw, 140px); text-decoration: none; scroll-snap-align: start; }
.mini-frame { display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .06); box-shadow: 0 0 0 1px rgba(244, 237, 239, .1); }
.mini-frame img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .more-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 14px; overflow: visible; margin-inline: 0 !important; padding-inline: 0 !important; }
  .mini { flex: none; }
}
.mini-title { display: block; margin-top: 8px; font-family: var(--display); font-size: 1rem; color: var(--on-velvet-dim); line-height: 1.3; }

/* WhatsApp: two equal partners */
.actions {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(36, 18, 25, .0), rgba(36, 18, 25, .94) 30%);
  border-top: 1px solid rgba(244, 237, 239, .08);
}
.act {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 60px;
  padding: 8px 12px; border-radius: 16px; text-decoration: none;
}
.act-mark { height: 22px; width: 44px; aspect-ratio: auto; }
.act-mark.mark-gj { -webkit-mask-size: auto 78%; mask-size: auto 78%; }
.act small { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 500; line-height: 1.2; white-space: nowrap; max-width: 100%; }
.act small .wa-icon { width: 14px; height: 14px; flex: none; opacity: .8; }
.act-ak { background: var(--on-velvet); color: var(--ink); }
.act-gj { background: var(--gold); color: var(--velvet-2); }

/* ---------- Toast & loading ---------- */
.sk { margin-top: 18px; }
.sk span { display: block; height: 12px; margin-bottom: 12px; border-radius: 6px; background: rgba(244, 237, 239, .08); }
.sk span:nth-child(2) { width: 82%; }
.sk span:nth-child(3) { width: 64%; }
.is-loading .slide img { width: 100%; height: 100%; object-fit: cover; }
.toast {
  position: fixed; z-index: 30; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); translate: -50% 12px;
  padding: 10px 18px; border-radius: 999px; background: var(--on-velvet); color: var(--ink); font-size: .9rem;
  opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s;
}
.toast.on { opacity: 1; translate: -50% 0; }

/* ---------- iPad portrait: a framed box with room around it ---------- */
@media (min-width: 640px) and (max-width: 1023px) and (min-height: 600px) {
  .box {
    width: calc(100% - 56px); height: calc(100% - 56px); max-width: 760px; margin: auto; border-radius: 22px;
    box-shadow: 0 40px 90px -30px rgba(20, 8, 14, .7), inset 0 0 0 1px var(--gold-line);
  }
  .toolbar { padding: 18px 20px 18px; }
  .slide { aspect-ratio: 4 / 4.4; max-height: 62vh; }
  .detail { padding: 34px 40px 40px; }
  .actions { padding-inline: 40px; }
  .more-row { margin-inline: -40px; padding-inline: 40px; scroll-padding-inline: 40px; }
}

/* ---------- iPad landscape & desktop (and phones held sideways): the split jewel box ---------- */
/* Keep in step with SPLIT in showroom.js */
@media (min-width: 1024px), (orientation: landscape) and (min-width: 640px) and (max-height: 599px) {
  .box {
    width: min(1220px, 94vw); height: min(880px, 92vh); margin: auto; border-radius: 22px;
    box-shadow: 0 40px 90px -30px rgba(20, 8, 14, .7);
  }
  @keyframes box-open {
    from { opacity: 0; transform: translateY(22px) scale(.975); clip-path: inset(4% 4% 4% 4% round 40px); }
    10% { opacity: 1; }
    to { opacity: 1; transform: none; clip-path: inset(0 round 22px); }
  }
  .sheet { display: grid; grid-template-columns: 1.08fr 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .scroller { display: contents; }
  .gallery { grid-column: 1; grid-row: 1 / 3; height: 100%; min-height: 0; overflow: hidden; }
  .slides { height: 100%; }
  .slide { aspect-ratio: auto; height: 100%; max-height: none; }
  .slide.is-jewel { padding: 40px; }
  .slide.is-plate { padding: 72px 44px 56px; gap: 30px; }
  .plate-arch { height: 70%; }
  .plate-caption strong { font-size: 1.45rem; }
  .detail {
    grid-column: 2; grid-row: 1; overflow-y: auto; overscroll-behavior: contain;
    padding: 84px 48px 40px; border-inline-start: 1px solid var(--gold-line);
  }
  .look-title { font-size: 3.2rem; }
  .actions { grid-column: 2; grid-row: 2; padding: 16px 48px 24px; background: var(--velvet-2); border-inline-start: 1px solid var(--gold-line); }
  .toolbar { inset-inline-start: auto; width: calc(100% / 2.08); padding: 20px 28px 0; background: none; }
  .tb-btn { background: rgba(255, 255, 255, .06); }
  .more-row { margin-inline: -48px; padding-inline: 48px; scroll-padding-inline: 48px; }
  /* 10. The share toast sits in the details column, above the buttons, near the Share link */
  .box .toast { position: absolute; left: calc(100% - 100% / 2.08 / 2); bottom: 112px; }
  [dir="rtl"] .box .toast { left: calc(100% / 2.08 / 2); }
}
/* Phones held sideways: the split box fills the screen, with tighter spacing */
@media (orientation: landscape) and (min-width: 640px) and (max-height: 599px) {
  .box { width: 100%; height: 100%; max-height: none; border-radius: 0; margin: 0; box-shadow: none; }
  .sheet { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
  .slide.is-plate { padding: 18px 24px 14px; gap: 8px; }
  .plate-arch { height: 76%; }
  .plate-caption strong { font-size: 1.1rem; }
  .plate-caption small { font-size: .75rem; }
  .dots { bottom: 6px; }
  .detail { padding: 58px 28px 24px; }
  .look-title { font-size: 2rem; }
  .actions { padding: 10px 28px calc(10px + env(safe-area-inset-bottom)); }
  .toolbar { padding: 8px 16px 0; }
  .more-row { margin-inline: -28px; padding-inline: 28px; scroll-padding-inline: 28px; }
  .box .toast { bottom: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .pairing-pane.is-entering > * { animation: none; }
  *, *::before, *::after, ::backdrop { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* ---------- Signature motion: the tapped arch grows into the jewel box ---------- */
.box.vt[open] { animation: none; }
/* One timeline (.5s): the arch and medallion travel from the card, the box rises beneath them as its own
   layer, the page underneath only dims (root), and the details follow a beat after. */
::view-transition-group(look-arch), ::view-transition-group(look-jewel) { z-index: 2; animation-duration: .5s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
::view-transition-old(look-arch), ::view-transition-new(look-arch),
::view-transition-old(look-jewel), ::view-transition-new(look-jewel) { animation-duration: .5s; height: 100%; object-fit: cover; }
::view-transition-group(look-box) { animation: none; }
::view-transition-new(look-box) { animation: box-open .5s var(--ease) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }
.box.is-opening .detail, .box.is-opening .actions { animation: pane-in .45s .12s var(--ease) both; }
/* The plate's caption and dots wait until the travelling arch has landed over them */
.box.is-opening .plate-captions, .box.is-opening .dots { animation: fade .3s .38s var(--ease) both; }
.sheet .is-leaving, .sheet.is-scrolled .is-leaving { opacity: 0; transition: opacity .15s ease-in; }
.sheet .actions { transition: opacity .2s var(--ease); }
.sheet .is-arriving { animation: fade .35s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }