/* NOIR interaction layer — depth and feedback without disturbing the quiet tone. */
:root { --home-design-bar-height: 0px; }
/* Keep the two art directions discoverable without placing a utility strip over the hero. */
.home-design-bar {
  inset: auto auto 18px 18px;
  display: flex;
  width: auto;
  height: 48px;
  gap: 0;
  padding: 4px;
  border: 1px solid #eee9df35;
  border-radius: 999px;
  background: #20241fe8;
  box-shadow: 0 10px 34px #080b0870;
  backdrop-filter: blur(18px);
  transition: opacity .35s ease, transform .35s ease;
}
.home-design-bar__label { display: none; }
.home-design-bar__options { gap: 0; }
.home-design-bar__options button {
  min-width: 68px;
  min-height: 38px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .07em;
}
.home-design-bar .home-design-bar__motion {
  width: 38px;
  min-width: 38px;
  height: 38px;
  padding: 0;
  border-left: 0;
  border-radius: 50%;
}
:root[data-home-look="cafe"] .home-design-bar {
  border-color: #2f291b24;
  background: #fffbf1ed;
  color: #332c22;
  box-shadow: 0 8px 26px #2c1d1730;
}
:root[data-home-look="cafe"] .home-design-bar__options button { color: #675e52; }
:root[data-home-look="cafe"] .home-design-bar__options button[aria-pressed="true"] { color: #fffaf0; background: #443b30; }
.noir-intro-active .home-design-bar { opacity: 0; pointer-events: none; transform: translateY(8px); }
:root[data-home-look="noir"] .noir-hero__bottom .noir-scroll { position: absolute; left: 0; bottom: 58px; }

:root[data-home-look="noir"] .noir-motion-enhanced {
  --noir-motion-progress: 0;
  --noir-motion-gold: #d3b994;
}

/* A quiet chapter rail doubles as reading progress and section navigation. */
.noir-motion-rail {
  position: fixed;
  z-index: 80;
  top: 50%;
  right: 22px;
  display: grid;
  grid-template-columns: 1px auto;
  gap: 0 11px;
  align-items: stretch;
  padding: 13px 8px 12px;
  border: 1px solid #fff1;
  border-radius: 999px;
  background: #171a17b8;
  color: #f4efe5;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 35px #0003;
  opacity: 0;
  pointer-events: none;
  translate: 18px -50%;
  transition: opacity .55s ease,translate .7s cubic-bezier(.22,.61,.36,1);
}
.noir-is-scrolled .noir-motion-rail { opacity: 1; pointer-events: auto; translate: 0 -50%; }
.noir-motion-rail__track { position: relative; grid-row: 1; grid-column: 1; width: 1px; margin-block: 9px 44px; overflow: hidden; background: #fff2; }
.noir-motion-rail__track i { position: absolute; inset: 0 0 auto; height: calc(var(--noir-motion-progress) * 100%); background: var(--noir-motion-gold); transition: height .12s linear; }
.noir-motion-rail nav { grid-row: 1; grid-column: 2; display: grid; gap: 3px; }
.noir-motion-rail nav a { position: relative; display: flex; align-items: center; justify-content: flex-end; min-width: 31px; min-height: 31px; color: #bdbbb0; text-decoration: none; }
.noir-motion-rail nav a::after { content: ""; width: 5px; height: 5px; margin-left: 9px; border: 1px solid currentColor; border-radius: 50%; transition: background .3s,width .3s,height .3s,color .3s; }
.noir-motion-rail nav a span { position: absolute; right: 38px; width: max-content; padding: 6px 9px; border-radius: 3px; background: #20231fe8; color: #e8e2d7; font: 10px/1.4 "Yu Mincho","Hiragino Mincho ProN",serif; letter-spacing: .06em; opacity: 0; pointer-events: none; translate: 7px 0; transition: opacity .25s,translate .3s; }
.noir-motion-rail nav a:is(:hover,:focus-visible,[aria-current="location"]) { color: var(--noir-motion-gold); }
.noir-motion-rail nav a:is(:hover,:focus-visible) span { opacity: 1; translate: 0; }
.noir-motion-rail nav a[aria-current="location"]::after { width: 8px; height: 8px; background: currentColor; }
.noir-motion-toggle { grid-column: 2; justify-self: end; display: grid; place-items: center; width: 31px; height: 31px; margin-top: 7px; padding: 0; border: 1px solid #fff2; border-radius: 50%; background: transparent; color: #d7d1c6; cursor: pointer; font: 10px/1 Arial,sans-serif; transition: color .3s,border-color .3s,background .3s; }
.noir-motion-toggle:hover { border-color: #d3b99499; background: #d3b99410; color: #f5ead7; }

.noir-motion-top {
  position: fixed;
  z-index: 79;
  right: 24px;
  bottom: 24px;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 2px;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(var(--noir-motion-gold) calc(var(--noir-motion-progress) * 1turn),#ffffff1f 0);
  color: #f5f0e5;
  cursor: pointer;
  box-shadow: 0 12px 28px #0004;
  opacity: 0;
  pointer-events: none;
  scale: .82;
  translate: 0 12px;
  transition: opacity .35s,scale .45s cubic-bezier(.22,.61,.36,1),translate .45s cubic-bezier(.22,.61,.36,1);
}
.noir-motion-top::before { content: ""; position: absolute; inset: 2px; border-radius: inherit; background: #252922ed; }
.noir-motion-top span { position: relative; font: 18px/1 Arial,sans-serif; }
.noir-motion-top.is-visible { opacity: 1; pointer-events: auto; scale: 1; translate: 0; }
.noir-motion-top:hover { scale: 1.07; }

/* Hero depth follows the visitor by only a few pixels. */
.noir-motion-enhanced .noir-hero { --noir-hero-x: 0px; --noir-hero-y: 0px; --noir-light-x: 50%; --noir-light-y: 50%; }
.noir-motion-enhanced .noir-hero__visuals { scale: 1.018; translate: calc(var(--noir-hero-x) * -.35) calc(var(--noir-hero-y) * -.35); transition: translate 1.2s cubic-bezier(.22,.61,.36,1); }
.noir-motion-enhanced .noir-hero__center { translate: var(--noir-hero-x) var(--noir-hero-y); transition: translate 1.15s cubic-bezier(.22,.61,.36,1); }
.noir-motion-enhanced .noir-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at var(--noir-light-x) var(--noir-light-y),#f8e6bd0b,transparent 34%); pointer-events: none; transition: background-position .8s ease; }

/* Existing reveals gain the layered, editorial cadence used in CAFÉ. */
.noir-motion-ready .noir-motion-enhanced .noir-reveal { filter: blur(2px); transition: opacity .75s ease,transform .8s cubic-bezier(.22,.61,.36,1),filter .7s ease; }
.noir-motion-ready .noir-motion-enhanced .noir-reveal.is-visible { filter: blur(0); }
.noir-motion-enhanced .noir-products .noir-reveal:nth-child(2) { transition-delay: .11s; }
.noir-motion-enhanced .noir-products .noir-reveal:nth-child(3) { transition-delay: .22s; }
.noir-motion-enhanced .noir-section-head::after { content: ""; display: block; width: 54px; height: 1px; margin: 27px auto 0; background: currentColor; opacity: .28; transform: scaleX(0); transition: transform 1s cubic-bezier(.22,.61,.36,1) .35s; }
.noir-motion-enhanced .noir-section-head.is-visible::after { transform: scaleX(1); }

/* Photographs travel at a slower rate than their frames. */
.noir-motion-enhanced :is(.noir-ritual__image,.noir-store__photo,.noir-closing) { isolation: isolate; }
.noir-motion-enhanced :is(.noir-ritual__image img,.noir-store__photo img,.noir-closing > img) { --noir-parallax-y: 0px; scale: 1.065; translate: 0 var(--noir-parallax-y); will-change: translate; }
.noir-motion-enhanced .noir-store__photo img { transition: translate .12s linear,scale 1s cubic-bezier(.22,.61,.36,1); }
.noir-motion-enhanced .noir-store__photo:hover img { scale: 1.095; }

/* Let the photography, rather than a simulated 3-D tilt, carry the product cards. */
@media (hover: hover) and (pointer: fine) {
  .noir-motion-enhanced .noir-product { transition: transform .35s cubic-bezier(.22,.61,.36,1),box-shadow .35s; }
  .noir-motion-enhanced .noir-product:hover { transform: translateY(-4px); box-shadow: 11px 18px 0 #8c806b20,0 28px 60px #080a084a; }
}

/* The circular arrow is the shared, quiet action cue. */
.noir-motion-enhanced :is(.noir-topic__arrow,.noir-arrow) { transition: transform .45s cubic-bezier(.22,.61,.36,1),background .35s; }
.noir-motion-enhanced :is(.noir-topic,.noir-button):hover :is(.noir-topic__arrow,.noir-arrow) { transform: translateX(4px); }

.home-motion-paused .noir-motion-enhanced :is(.noir-hero__visuals,.noir-hero__center) { translate: 0; transition: none; }
.home-motion-paused .noir-motion-enhanced :is(.noir-ritual__image img,.noir-store__photo img,.noir-closing > img) { translate: 0; transition: none; }

@media (max-width: 1180px) { .noir-motion-rail { display: none; } }
@media (max-width: 540px) {
  :root[data-home-look="noir"] .home-design-bar { gap: 0; padding: 4px; }
  :root[data-home-look="noir"] .home-design-bar__options button { min-width: 62px; padding-inline: 10px; }
  .home-design-bar { left: 14px; bottom: 14px; }
}
@media (max-width: 540px) {
  .noir-motion-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
  .noir-motion-enhanced .noir-hero__visuals,.noir-motion-enhanced .noir-hero__center { translate: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .noir-motion-enhanced .noir-reveal { filter: none !important; }
  .noir-motion-enhanced :is(.noir-hero__visuals,.noir-hero__center,.noir-ritual__image img,.noir-store__photo img,.noir-closing > img) { translate: 0 !important; transition: none !important; }
  .noir-motion-enhanced .noir-button::before { display: none; }
  .noir-motion-rail__track i { transition: none; }
}