/* Aladin Jewelry · luxury presentation layer (2026-10-25).
   Motion, refined hovers and buttons, glass header, page cross-fades, trust strip and phone action bar.
   Presentation only; every effect degrades to the plain page in browsers that don't support it. */

/* WebP <picture> wrappers must not change any layout. */
.hero-photo-wrap picture,.home-photo-grid picture,.real-project picture,.pilot-project-visual picture{display:contents}

/* Location photos: lighter WebP where the browser supports it, JPG otherwise. */
.location-photo.south{background-image:image-set(url('assets/south-showroom-generated.webp') type('image/webp'),url('assets/south-showroom-generated.jpg') type('image/jpeg'))}
.location-photo.badaro{background-image:image-set(url('assets/badaro-office-generated.webp') type('image/webp'),url('assets/badaro-office-generated.jpg') type('image/jpeg'))}

/* Page-to-page cross-fade (Chrome, Edge, Safari 18.2+). */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.4,0,.2,1)}

/* Glass header: content glides beneath a softly blurred burgundy bar. */
.header,header.header{background:rgba(113,25,39,.95);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px)}

/* Buttons and links: gentle lift, arrows that glide, gold on hover. */
.btn,.atelier-cta,.outline,.outline-dark{transition:background-color .35s,color .35s,box-shadow .35s,transform .35s,border-color .35s}
.btn span,.text-link span,.atelier-cta span,.atelier-discover span{display:inline-block;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.btn:hover span,.text-link:hover span,.atelier-cta:hover span,.atelier-discover:hover span{transform:translateX(5px)}
.btn-gold:hover{background:#f1dfae;box-shadow:0 14px 32px rgba(230,211,152,.22);transform:translateY(-2px)}
.text-link{transition:color .35s,border-color .35s}
.text-link:hover{color:#e6d398;border-color:#e6d398}
.text-link.dark:hover{color:#5a101d;border-color:#5a101d}
.outline:hover{background:#711927;color:#fffaf2}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid #d9b77b;outline-offset:3px}

/* Project gallery and photo grid: slow zoom and a gold underline on the title, like a jeweller's showcase. */
.real-project img,.pilot-project-visual img,.home-photo-grid img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.work .gallery .gallery-card>div:last-child>b{width:fit-content;background:linear-gradient(#b8915a,#b8915a) left 100%/0 1px no-repeat;padding-bottom:2px;transition:background-size .55s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){
  .gallery-card:hover .real-project img,.gallery-card:hover .pilot-project-visual img,.home-photo-grid figure:hover img{transform:scale(1.05)}
  .work .gallery .gallery-card:hover>div:last-child>b{background-size:100% 1px}
}

/* Content rises softly into view while scrolling (scroll-driven CSS; skipped where unsupported or when motion is reduced). */
@keyframes luxe-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .section-head,.intro-copy,.home-photo-grid figure,.location-grid article,.atelier-heading,.atelier-questions-heading,.atelier-faq details,.trust-strip li{animation:luxe-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
  /* The gallery scrolls sideways on phones, so only animate its cards where it is a normal grid. */
  @media(prefers-reduced-motion:no-preference) and (min-width:681px){
    .work .gallery .gallery-card{animation:luxe-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
  }
}

/* Trust strip under the homepage hero. */
.trust-strip{background:#2d0910;border-top:1px solid rgba(230,211,152,.16);border-bottom:1px solid rgba(230,211,152,.16);padding:28px 5vw}
.trust-strip ul{list-style:none;margin:0 auto;padding:0;max-width:1200px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.trust-strip li{color:#d8c4bd;font-size:12px;line-height:1.55;padding-left:16px;border-left:1px solid rgba(230,211,152,.38)}
.trust-strip li span{display:block;font:500 20px/1.2 'Cormorant Garamond',Georgia,serif;color:#f1dfae;margin-bottom:4px}
@media(max-width:820px){.trust-strip{padding:24px 24px}.trust-strip ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}.trust-strip li span{font-size:19px}}

/* Typography polish on phones: slightly larger small print and calmer line lengths. */
@media(max-width:680px){
  .eyebrow{font-size:10px;letter-spacing:.24em}
  .lead{font-size:16.5px;line-height:1.65}
  .work .gallery .gallery-card>div:last-child>small{font-size:12.5px}
  .section-head>p,.intro-copy>p:not(.eyebrow){font-size:15px;line-height:1.7}
}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}.real-project img,.pilot-project-visual img,.home-photo-grid img{transition:none}}

/* "The family behind Aladin": the people and the craft, between the projects and the locations. */
.family{padding-top:96px;padding-bottom:96px}
.family-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;max-width:1280px;margin:0 auto;align-items:center}
.family-photo{margin:0;position:relative;overflow:hidden;background:#2d0910}
.family-photo picture{display:contents}
.family-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.family-photo-main img{aspect-ratio:16/11;object-position:center 45%}
.family-photo-work{margin-top:28px}
.family-photo-work img{aspect-ratio:16/10;object-position:center 72%}
.family-photo figcaption{position:absolute;left:16px;bottom:16px;background:rgba(45,9,16,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#f1dfae;padding:8px 12px;font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.family-copy h2{font-size:clamp(48px,5vw,76px);line-height:.88;letter-spacing:-.03em;margin:0 0 24px}
.family-copy>p:not(.eyebrow){color:var(--muted);max-width:460px;margin:0 0 26px;line-height:1.75}
.family-quote{margin:0;padding:4px 0 4px 20px;border-left:1px solid #b8915a}
.family-quote p{margin:0;font:italic 400 clamp(22px,2.1vw,28px)/1.3 'Cormorant Garamond',Georgia,serif;color:#5a101d}
@media(hover:hover){.family-photo:hover img{transform:scale(1.04)}}
@media(max-width:900px){.family-grid{grid-template-columns:1fr;gap:0}.family-copy{display:contents}.family-copy>.eyebrow{order:1}.family-copy>h2{order:2}.family-copy>p:not(.eyebrow){order:3}.family-photo-main{order:4;margin:6px 0 30px}.family-quote{order:5;margin-bottom:30px}.family-photo-work{order:6;margin-top:0}.family-photo-main img{aspect-ratio:16/11}}
@media(max-width:680px){.family{padding:72px 24px}.family-copy h2{font-size:clamp(42px,12vw,56px)}.family-photo-work img{aspect-ratio:4/3.3}}
@supports (animation-timeline:view()){@media(prefers-reduced-motion:no-preference){.family-photo,.family-copy>*{animation:luxe-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}}}

.family-photo-work figcaption{top:16px;bottom:auto}

/* Family section, two-portrait layout: Hadi in the showroom, Mohamad at the workbench. */
.family-duo-layout .family-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:end;max-width:1280px;margin:0 auto 44px}
.family-duo-layout .family-copy{display:block}
.family-duo-layout .family-copy>p:not(.eyebrow){margin-bottom:0;max-width:560px}
.family-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;max-width:1280px;margin:0 auto}
.family-duo .family-photo{margin:0}
.family-duo .family-photo img{aspect-ratio:1/1;object-position:center 50%}
.family-duo .family-photo-work img{aspect-ratio:1/1;object-position:center 60%}
.family-duo .family-photo figcaption{top:16px;bottom:auto}
.family-duo .family-photo-work figcaption{top:16px;bottom:auto}
@media(max-width:900px){.family-duo-layout .family-head{grid-template-columns:1fr;gap:28px;margin-bottom:30px}.family-duo{gap:16px}}
@media(max-width:680px){.family-duo{grid-template-columns:1fr}.family-duo .family-photo img{aspect-ratio:4/4.2}}

/* Family section without the quote: the story takes the full heading width. */
.family-duo-layout .family-head{display:block}
.family-duo-layout .family-copy>p:not(.eyebrow){max-width:720px}

/* Portrait frames (4:5) so Hadi's full-length photo is shown whole, not zoomed. */
.family-duo{align-items:start}
.family-duo .family-photo img{aspect-ratio:4/5;object-position:center 45%}
.family-duo .family-photo-work img{aspect-ratio:4/5;object-position:100% center}
@media(max-width:680px){.family-duo .family-photo img,.family-duo .family-photo-work img{aspect-ratio:4/5}}
/* "Badaro, Beirut" link in the family story jumps to the Badaro card, clear of the sticky header. */
.family-link{color:#5a101d;text-decoration:underline;text-decoration-color:rgba(184,145,90,.6);text-underline-offset:3px;transition:color .3s,text-decoration-color .3s}
.family-link:hover{color:#711927;text-decoration-color:#b8915a}
#badaro{scroll-margin-top:100px}