/* DIALIX hero, scene 1: the Aquanaut sways gently in 3D, full-bleed. */
.hero .scene-360{position:absolute;inset:0;overflow:hidden;background:#050405;perspective:1600px;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.hero .scene-360.dragging{cursor:grabbing}
.hero .scene-360:not(.active){pointer-events:none}
.turntable-ambient{position:absolute;inset:-8%;background:#050405 center/cover no-repeat;filter:blur(34px) brightness(.42) saturate(.9);transform:scale(1.1)}
.tilt-card{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.tilt-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 48%;opacity:0;transition:opacity 1.6s ease;pointer-events:none;-webkit-user-drag:none}
.tilt-photo.on{opacity:1}
.tilt-card:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 30%,#ffffff12 48%,transparent 66%);transform:translateX(var(--sheen,0%))}
.hero .hero-shade{pointer-events:none}

.turntable-meta{position:absolute;z-index:4;right:4%;bottom:92px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font:10px 'Jost',Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#B9937C;text-align:right;pointer-events:none}
.turntable-meta strong{font-weight:400;color:var(--gold,#B9937C)}
.turntable-hint{display:inline-flex;align-items:center;gap:9px;color:#B9937C}
.turntable-hint svg{width:22px;height:14px;stroke-width:1}

/* Wrist shots: framed tight on the watch, a slow push-in, and a soft focus that fades the clothes. */
.hero .hero-image.scene.scene-wrist{background-color:#050405!important;background-repeat:no-repeat!important;background-size:var(--bg-size)!important;background-position:var(--bg-pos)!important;transform-origin:var(--fx) var(--fy);--wr:20vw}
.hero .hero-image.scene.scene-wrist:after{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--fx) var(--fy),transparent 0 calc(var(--wr) * 1.4),#05040540 calc(var(--wr) * 2.6),#05040599 100%)}
.hero .hero-image.scene.scene-wrist.scene-wrist-a{background-image:url('assets/hero360/wrist-nautilus-rose-wide.jpg')!important;--bg-size:140% auto;--bg-pos:66.5% 36%;--fx:70%;--fy:48%}
.hero .hero-image.scene.scene-wrist.scene-wrist-b{background-image:url('assets/hero360/wrist-grand-complication.jpg')!important;--bg-size:125% auto;--bg-pos:25% 52%;--fx:70%;--fy:48%}
.hero .hero-image.scene.scene-wrist.scene-wrist-c{background-image:url('assets/hero360/wrist-celestial.jpg')!important;--bg-size:125% auto;--bg-pos:0% 51%;--fx:63%;--fy:48%}
@media(max-aspect-ratio:1/1){
  .hero .hero-image.scene.scene-wrist{--wr:38vw}
  .hero .hero-image.scene.scene-wrist.scene-wrist-a{background-image:url('assets/hero360/wrist-nautilus-rose.jpg')!important;--bg-size:260% auto;--bg-pos:81% 61%;--fx:50%;--fy:40%}
  .hero .hero-image.scene.scene-wrist.scene-wrist-b{--bg-size:220% auto;--bg-pos:70% 70%;--fx:50%;--fy:40%}
  .hero .hero-image.scene.scene-wrist.scene-wrist-c{--bg-size:220% auto;--bg-pos:50% 67%;--fx:50%;--fy:40%}
}

@media(max-width:760px){
  .tilt-photo{object-position:center 40%}
  .turntable-meta{top:max(84px,calc(env(safe-area-inset-top,0px) + 78px));bottom:auto;right:22px;font-size:8px;letter-spacing:.14em;gap:7px}
  .hero .scene-indicators{gap:4px}
}
html[dir=rtl] .turntable-meta{right:auto;left:4%;align-items:flex-start;text-align:left}
@media(prefers-reduced-motion:reduce){.tilt-photo{transition:none}}

/* Opening scene: the rose-gold Nautilus, framed tight on the watch. */
.hero .hero-image.scene.scene-wrist.scene-wrist-a.scene-gold{background-image:url('assets/hero360/wrist-nautilus-rose-close.jpg')!important;--bg-size:112% auto;--bg-pos:29% 52%;--fx:66%;--fy:48%}
@media(max-aspect-ratio:1/1){
  .hero .hero-image.scene.scene-wrist.scene-wrist-a.scene-gold{background-image:url('assets/hero360/wrist-nautilus-rose-close.jpg')!important;--bg-size:200% auto;--bg-pos:74% 0%;--fx:50%;--fy:32%;--wr:40vw}
  .hero .hero-image.scene.scene-gold:after{background:linear-gradient(180deg,transparent 52%,#050405 68%)!important}
}

/* One motion for every photo, as on Auren: a slow, steady push-in and a long crossfade. */
.hero .hero-image.scene{opacity:0;transition:opacity 2.6s ease!important;inset:-3%}
.hero .hero-image.scene.active{opacity:1;animation:dialix-push 15s linear forwards!important}
@keyframes dialix-push{from{transform:scale(1)}to{transform:scale(1.2)}}
@media(prefers-reduced-motion:reduce){.hero .hero-image.scene.active{animation:none!important}}

/* Closing section: the real Nautilus over Dubai, seen from further back so the city leads. */
main section.contact::before{background-size:88% auto!important;background-position:58% 78%!important;filter:saturate(.95) contrast(1)!important}
main section.contact::after{background:radial-gradient(ellipse 58% 75% at 58% 60%,transparent 55%,#050405 100%),linear-gradient(180deg,#050405 0%,#050405 18%,rgba(5,4,5,0) 44%),linear-gradient(90deg,rgba(5,4,5,.85) 0%,rgba(5,4,5,.55) 36%,rgba(5,4,5,.15) 64%,rgba(5,4,5,.1) 100%)!important}
@media(max-width:760px){
  main section.contact{justify-content:flex-start!important;padding-top:96px!important;padding-bottom:0!important;min-height:max(100svh,720px)!important}
  main section.contact::before{background-size:250% auto!important;background-position:50% 84%!important}
  main section.contact::after{background:linear-gradient(180deg,rgba(5,4,5,.92) 0%,rgba(5,4,5,.7) 48%,rgba(5,4,5,.15) 72%,rgba(5,4,5,0) 100%)!important}
}

/* The art of discovery: real detail shots and the maisons DIALIX sources. */
.manifesto .editorial-mosaic figure{position:relative}
.manifesto .editorial-mosaic figure:last-child img{object-fit:cover}
.manifesto .editorial-mosaic img{object-position:center 45%}
.manifesto .editorial-mosaic figcaption{position:absolute;left:16px;bottom:14px;font:400 10px/1 'Jost',Arial,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#B9937C;text-shadow:0 1px 10px #000a}
.manifesto .editorial-mosaic figure:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#050405b3 0%,transparent 34%)}
.maisons{list-style:none;margin:56px auto 0;padding:26px 0 0;max-width:1300px;border-top:1px solid #B9937C33;display:flex;flex-wrap:wrap;justify-content:center;gap:14px 44px}
.maisons li{font:400 12px/1.4 'Cinzel',Georgia,serif;letter-spacing:.26em;text-transform:uppercase;color:#B9937C}
@media(max-width:760px){.maisons{margin-top:36px;gap:12px 24px}.maisons li{font-size:10px;letter-spacing:.2em}.manifesto .editorial-mosaic figcaption{left:12px;bottom:10px;font-size:9px}}
.manifesto .editorial-mosaic{grid-template-columns:1.5fr 1fr 1fr 1.5fr}
@media(max-width:1050px) and (min-width:761px){.manifesto .editorial-mosaic{grid-template-columns:1fr 1fr}.manifesto .editorial-mosaic figure{height:300px}}
@media(max-width:760px){.manifesto .editorial-mosaic{grid-template-columns:1fr 1fr}.manifesto .editorial-mosaic figure:last-child{grid-column:1/-1;height:230px}}
.manifesto .editorial-mosaic figure:last-child img{object-position:38% 55%}

/* The art of discovery: a magazine-style mosaic that drifts endlessly, like a slow vitrine. */
.bento-run{--h:440px;margin:70px calc(50% - 50vw) 0;overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.bento-run.drag{cursor:grabbing}
.bento-track{display:flex;width:max-content;will-change:transform}
.bento-group{display:flex;gap:14px;padding-right:14px;height:var(--h)}
.bcol{display:flex;flex-direction:column;gap:14px;flex:none}
.bcol.w-wide{width:calc(var(--h) * 1.45)}.bcol.w-tall{width:calc(var(--h) * .74)}.bcol.w-stack{width:calc(var(--h) * 1.02)}
.bt{position:relative;margin:0;overflow:hidden;flex:1;min-height:0;background:#201818}
.bt img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.bt:hover img{transform:scale(1.05)}
.bt:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#050405c4 0%,transparent 38%)}
.bt figcaption{position:absolute;left:16px;right:16px;bottom:14px;z-index:1;display:grid;gap:5px;text-align:left}
.bt figcaption span{font:400 10px/1 'Jost',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#B9937C}
.bt figcaption strong{font:400 21px/1.15 'Cormorant Garamond',Georgia,serif;color:#B9937C}
.bt.half figcaption strong{font-size:18px}
@media(max-width:760px){.bento-run{--h:330px;margin-top:42px}.bento-group,.bcol{gap:10px}.bento-group{padding-right:10px}.bt figcaption{left:12px;bottom:10px}.bt figcaption strong{font-size:17px}.bt.half figcaption strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){.bt img{transition:none}}
.bento-ctrl{display:flex;justify-content:center;gap:14px;margin-top:30px}
.bento-arr{width:54px;height:54px;border-radius:50%;border:1px solid #B9937C66;background:transparent;color:#B9937C;display:grid;place-items:center;cursor:pointer;transition:background .3s,color .3s,border-color .3s}
.bento-arr svg{width:20px;height:20px;stroke-width:1.2}
.bento-arr:hover{background:#B9937C;border-color:#B9937C;color:#050405}
.bento-arr:focus-visible{outline:1px solid #B9937C;outline-offset:4px}
.maisons{margin-top:40px}
@media(max-width:760px){.bento-ctrl{margin-top:22px}.bento-arr{width:46px;height:46px}}

/* A world within a watch: the page holds still while the camera travels into the RM 35-02. */
main>section#within.zoom-story{position:relative;height:300vh!important;min-height:300vh!important;max-height:none!important;padding:0!important;background:#050405;overflow:visible!important;display:block!important}
.zs-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.zs-ambient{position:absolute;inset:-10%;background:#050405 url('assets/hero360/rm35-full.jpg') center/cover no-repeat;filter:blur(40px) brightness(.35) saturate(.9)}
.zs-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.zs-img{height:100%;width:auto;max-width:none;display:block;transform-origin:49% 46%;will-change:transform,filter}
.zs-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:linear-gradient(90deg,#050405f0 0%,#050405b8 36%,#05040533 62%,transparent 100%)}
.zs-copy{position:absolute;left:7%;top:50%;transform:translateY(-40%);width:min(560px,44%);text-align:left;opacity:0;display:grid;gap:22px;justify-items:start}
.zs-copy h2{font:200 clamp(38px,4.6vw,70px)/1.08 'Jost',Arial,sans-serif!important;text-transform:uppercase;letter-spacing:.055em;margin:0;color:#B9937C}
.zs-copy h2 em{font-family:'Cormorant Garamond',Georgia,serif;text-transform:none;letter-spacing:0;color:#B9937C;font-weight:400}
.zs-copy .body-copy{margin:0;color:#B9937C;max-width:30em}
.zs-ref{font:400 10px/1.4 'Jost',Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#B9937C;margin:0}
.zs-hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;font:400 10px/1 'Jost',Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase;color:#B9937C}
.zs-hint i{width:1px;height:38px;background:linear-gradient(#B9937C,transparent);animation:zs-hint 2.2s ease-in-out infinite}
@keyframes zs-hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.zoom-story>.section-timer{display:none}
@media(max-width:760px){
  .zs-shade{background:linear-gradient(0deg,#050405f5 0%,#050405c7 42%,#05040540 70%,transparent 100%)}
  .zs-copy{left:24px;right:24px;width:auto;top:auto;bottom:max(56px,env(safe-area-inset-bottom,0px));transform:none;gap:16px}
  .zs-copy h2{font-size:34px!important}
  .zs-copy .body-copy{font-size:14px}
}
@media(prefers-reduced-motion:reduce){main>section#within.zoom-story{height:auto!important;min-height:0!important}.zs-sticky{position:relative}.zs-copy,.zs-shade{opacity:1}.zs-hint{display:none}}

/* Private sourcing: the three Day-Date in hand sit behind the copy, kept dark so the text leads. */
main>section.sourcing{background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(185,147,124,.16) 0%,rgba(185,147,124,0) 60%),linear-gradient(180deg,#201818 0%,#050405 100%)!important;border:1px solid rgba(185,147,124,.28)}