/* Shutters · the hero is a run of three cabinet doors. Each swings open on its hinge onto that
   product, set up as a finished room at the Experience Center. Each door is drawn as its product. */

/* ── 1 + 2 · Head ───────────────────────────────────── */
.shutters { padding: calc(var(--nav-h) + clamp(28px, 5vh, 64px)) 0 clamp(80px, 10vw, 140px); }
.shutters__head { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 24px var(--gutter); align-items: end; margin-bottom: clamp(28px, 4vh, 44px); }
.shutters__title { margin: 0; max-width: 13em; font-size: clamp(2rem, 3.5vw, 3.6rem); font-weight: 250; font-variation-settings: 'wdth' 118; line-height: 1.04; letter-spacing: -.01em; color: var(--wood); text-wrap: balance; }
.shutters__side { display: grid; gap: 18px; justify-items: start; }

/* ── The cabinet ────────────────────────────────────── */
.cabinet { --h: clamp(440px, 62svh, 800px); --t: 7px; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--wood); }
/* the plinth and its shadow on the floor */
.cabinet::after { content: ''; position: absolute; left: 14px; right: 14px; top: 100%; height: 16px; background: linear-gradient(var(--wood), #2a1d16); box-shadow: 0 18px 30px -12px #3b2a2059; }
.bay { position: relative; height: var(--h); perspective: 3400px; perspective-origin: 50% 40%; }
.bay:nth-child(1) { perspective-origin: 150% 40%; }
.bay:nth-child(3) { perspective-origin: -50% 40%; }

/* inside the bay: the room at the Experience Center */
.bay__room { position: absolute; inset: 0; overflow: hidden; background: var(--deep); }
.bay__room > img { width: 100%; height: 100%; object-fit: cover; }
.bay__room::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 48px #2a1d1640; }
.bay__room .render-label { position: absolute; right: 10px; top: 10px; padding: 5px 9px; background: var(--raised); z-index: 1; }
.bay.is-open .bay__room { cursor: pointer; }
/* the card: frosted, and short, so the room shows through */
.bay__info { position: absolute; inset: auto 10px 10px; z-index: 1; display: grid; gap: 8px; padding: 14px 16px 16px; cursor: auto; background: #f8f5efb3; -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15); box-shadow: 0 0 0 1px #ffffff59 inset; }
.bay__name { margin: 0; font-size: clamp(1.3rem, 1.8vw, 1.7rem); font-weight: 250; font-variation-settings: 'wdth' 120; line-height: 1.1; color: var(--wood); }
.types { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--brass); display: flex; flex-wrap: wrap; gap: 0 12px; font-size: .8125rem; }
.types li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: .5em; background: var(--brass); vertical-align: .15em; }
.bay__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 2px; }
/* shut the door again (clicking anywhere on the room does the same) */
.bay__close { position: absolute; left: 10px; top: 10px; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: var(--graphite); background: #f8f5efcc; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); cursor: pointer; }
.bay__close svg { width: 18px; height: 18px; }
.bay__close:hover { background: var(--raised); }
.bay__acts .btn { min-height: 44px; padding: 0 1em; font-size: .875rem; }
.bay__room > *:not(img) { transition: opacity var(--t-slow) var(--soft-close) 200ms; }
.bay:not(.is-open) .bay__room > *:not(img) { opacity: 0; transition-delay: 0ms; }

/* the door: a board with a face, an edge and a back, hinged on one side */
.door {
  position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer;
  transform-style: preserve-3d; transform-origin: left center; transition: transform 1.15s var(--soft-close);
}
.bay[data-hinge='right'] .door { transform-origin: right center; }
.door:focus-visible { outline: 0; }
.door:focus-visible .door__front { outline: 2px solid var(--rust); outline-offset: -6px; }
.door__front, .door__back { position: absolute; inset: 0; backface-visibility: hidden; }
.door__front { transform: translateZ(calc(var(--t) / 2)); overflow: hidden; background: var(--raised); box-shadow: inset 0 0 0 1px #00000012; }

/* each door is drawn as the thing it opens onto, from Vitakasa's own finishes */
.front { position: absolute; inset: 0; display: grid; isolation: isolate; }
.front i { position: relative; display: block; min-height: 0; }
/* daylight from the upper left, and the carcass shading the top and bottom edges */
.front::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, #ffffff24, #0000 35%, #0000 62%, #00000030); box-shadow: inset 0 14px 18px -14px #2a1d1673, inset 0 -10px 14px -12px #2a1d1659; }
.f-plinth { background: #2a1d16; }
/* ivory lacquer: kitchen wall units, the wardrobe loft */
.f-wall, .f-loft { background: linear-gradient(90deg, #0000 calc(50% - .5px), #3b2a2033 0 calc(50% + .5px), #0000 0), linear-gradient(#f1ece3, #e4dbcc); }
/* kitchen: ivory wall units, a marble splashback and worktop, three cashmere lacquer drawers with brass pull lines */
.bay[data-type='kitchen'] .front { grid-template-rows: 36% 19% 3.5% 1fr 1fr 1fr 2.5%; }
.f-wall { z-index: 1; box-shadow: 0 8px 12px -6px #3b2a2073; }
/* the LED strip under the wall units, washing the splashback */
.f-wall::after { content: ''; position: absolute; left: 5%; right: 5%; bottom: 0; height: 2px; background: #fff4de; box-shadow: 0 2px 12px 3px #ffdca480; }
.f-splash { background: linear-gradient(#ffe8c48c, #ffe8c400 70%), url(assets/img/tex-marble.jpg) center / cover; }
.f-top { z-index: 1; background: linear-gradient(#ffffff59, #0000 40%), url(assets/img/tex-marble.jpg) 30% 60% / 260%; box-shadow: 0 5px 7px -3px #2a1d1699; }
/* each drawer: a brushed brass pull line along the top, a shadow gap below, matte lacquer catching the light */
.bay[data-type='kitchen'] .f-drawer { background:
  linear-gradient(#e2c792 0 1px, var(--brass) 1px 3px, #8a6d45 3px 4px, #0000 4px calc(100% - 3px), #5a4a3a73 0),
  linear-gradient(100deg, #ffffff2e, #0000 45%),
  linear-gradient(#bba893, #a3907a); }
.bay[data-type='kitchen'] .door__pull { display: none; }
/* wardrobe: a loft over a tall shutter of fluted glass in a dark frame, lit from inside */
.bay[data-type='wardrobe'] .front { grid-template-rows: 15% 1fr; gap: 4px; background: #2b2622; }
.f-glass { overflow: hidden; border: 10px solid #3a342e; background: #3a342e; box-shadow: inset 0 0 0 1px #00000080, 0 0 0 1px #ffffff1a; }
.f-glass::before { content: ''; position: absolute; inset: -14px; background: url(assets/img/wardrobe-walkin-glass-dark.jpg) 22% 40% / cover; filter: blur(6px) brightness(1.08) saturate(.85); }
/* fluted glass over the warm shelf lights inside */
.f-glass::after { content: ''; position: absolute; inset: 0; background:
  repeating-linear-gradient(90deg, #ffffff38 0 2px, #ffffff0d 2px 7px, #00000029 7px 10px),
  linear-gradient(#0000 21%, #ffe3b366 23%, #0000 27%, #0000 46%, #ffe3b366 48%, #0000 52%, #0000 71%, #ffe3b359 73%, #0000 77%); }
.bay[data-type='wardrobe'] .door__pull { top: 58%; height: 54%; }
/* storage and custom furniture: a slatted walnut wall unit, a ledge, two leather-faced drawers */
.bay[data-type='storage'] .front { grid-template-rows: 57% 3% 1fr 1fr 2.5%; }
/* walnut slats with a warm light behind them, a floating ledge lit from underneath */
.f-slats { background: linear-gradient(#0000 55%, #ffcf8a2e), repeating-linear-gradient(90deg, #ffffff0f 0 1px, #0000 1px 23px, #140c08a6 23px 28px), url(assets/img/mat-dark-ribbed.jpg) center / cover; }
.f-ledge { z-index: 1; background: linear-gradient(#f6f1e9, #d9cfbf); box-shadow: 0 6px 9px -4px #2a1d1699; }
.f-ledge::after { content: ''; position: absolute; left: 4%; right: 4%; top: 100%; height: 2px; background: #fff4de; box-shadow: 0 3px 14px 4px #ffdca466; }
.bay[data-type='storage'] .f-drawer { background: linear-gradient(#0000 calc(100% - 3px), #2a1d1640 0), url(assets/img/mat-leather-cream.jpg) center / 150px; }
.bay[data-type='storage'] .f-drawer::after { content: ''; position: absolute; left: 50%; top: 50%; width: 26%; height: 5px; translate: -50% -50%; background: linear-gradient(#d1b27c, var(--brass) 50%, #8d6f43); box-shadow: 0 2px 3px #2a1d1659; }
.bay[data-type='storage'] .door__pull { display: none; }
/* the inside of the door: plain laminate */
.door__back { transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
/* the edge band */
.door__edge { position: absolute; top: 0; bottom: 0; right: calc(var(--t) / -2); width: var(--t); background: var(--brass); transform: rotateY(90deg); }
.bay[data-hinge='right'] .door__edge { right: auto; left: calc(var(--t) / -2); }
/* the pull: a brass bar at the free edge */
.door__pull { position: absolute; top: 50%; right: 22px; width: 6px; height: 26%; translate: 0 -50%; background: linear-gradient(90deg, #c9a874, var(--brass) 45%, #8d6f43); box-shadow: 2px 3px 5px #2a1d1659; }
.bay[data-hinge='right'] .door__pull { right: auto; left: 22px; }
.door__label {
  position: absolute; left: 24px; right: 48px; top: 24px; text-align: left;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 350; font-variation-settings: 'wdth' 120; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2;
  color: var(--ink, var(--raised)); text-shadow: 0 1px 2px #0000002e;
}
.bay[data-hinge='right'] .door__label { left: 48px; right: 24px; }
.door__label small { display: block; margin-top: 8px; font-size: .75rem; letter-spacing: .08em; opacity: .8; }

/* a door falls ajar under the pointer (and once, in turn, when the cabinet comes into view) */
@media (hover: hover) and (pointer: fine) {
  .bay:not(.is-open):hover .door { transform: rotateY(-14deg); transition-duration: .7s; }
  .bay[data-hinge='right']:not(.is-open):hover .door { transform: rotateY(14deg); }
}
.bay.is-peek:not(.is-open) .door { transform: rotateY(-16deg); transition-duration: .8s; }
.bay.is-peek[data-hinge='right']:not(.is-open) .door { transform: rotateY(16deg); }
.bay.is-open .door { transform: rotateY(-104deg); }
.bay.is-open[data-hinge='right'] .door { transform: rotateY(104deg); }
/* without scripts the doors stand open, so nothing is hidden */
html:not(.js) .door { transform: rotateY(-104deg); }
html:not(.js) .bay[data-hinge='right'] .door { transform: rotateY(104deg); }

/* the Open / Close badge that stands in for the pointer over the doors (shutters.js adds it for mice only) */
.door-cursor {
  position: fixed; left: 0; top: 0; z-index: 60; width: 86px; height: 86px; margin: -43px 0 0 -43px;
  display: grid; place-items: center; border-radius: 50%; pointer-events: none;
  background: #f8f5efe0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 12px 30px -12px #3b2a2073, inset 0 0 0 1px #b08d5759;
  color: var(--wood); font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  opacity: 0; scale: .4; transition: opacity .2s, scale .35s var(--soft-close);
}
.door-cursor.is-on { opacity: 1; scale: 1; }
.has-cursor .bay, .has-cursor .door, .has-cursor .bay.is-open .bay__room { cursor: none; }
.has-cursor .bay__info { cursor: auto; }

/* ── Small screens: the doors stack; tap one to open it ── */
@media (max-width: 860px) {
  .shutters__head { grid-template-columns: 1fr; }
  .shutters__side .acts { display: none; }
  .cabinet { grid-template-columns: 1fr; gap: 4px; }
  /* each bay keeps the room behind its door, with the frosted card over the photo, as on desktop */
  .bay { height: min(128vw, 560px); perspective-origin: 50% 40% !important; }
  .bay__info { inset: auto 8px 8px; padding: 12px 14px 14px; }
  .door__label { top: 20px; }
}