/* ============================================================
   SATSUMA NOIR — CAFÉ look: decorations and motion
   Elements injected by cafe-motion.js (class .cafe-deco, aria-hidden)
   and the keyframes they share. CAFÉ only.
   ============================================================ */

:root:not([data-look="cafe"]) .cafe-deco { display: none !important; }

/* ---------- Keyframes ---------- */
@keyframes cafeKenBurns {
  from { transform: scale(1.02); }
  to { transform: scale(1.12) translate3d(-1.2%, -1.4%, 0); }
}
@keyframes cafeBrandIn {
  from { opacity: 0; letter-spacing: 0.3em; filter: blur(10px); }
}
@keyframes cafeInkDown {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}
@keyframes cafeWrite {
  from { clip-path: inset(-20% 100% -20% 0); }
  to { clip-path: inset(-20% -5% -20% 0); }
}
@keyframes cafeUnderline {
  from { background-size: 0% 9px; }
}
@keyframes cafeShine {
  0%, 70% { transform: translateX(-130%); }
  100% { transform: translateX(130%); }
}
@keyframes cafeSpin {
  to { transform: rotate(360deg); }
}
@keyframes cafeSwing {
  from { transform: rotate(-4deg); }
  to { transform: rotate(4deg); }
}
@keyframes cafeGlow {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}
@keyframes cafeDrip {
  0% { opacity: 0; transform: translateY(-4px) scale(0.5); }
  20% { opacity: 1; }
  78% { opacity: 1; transform: translateY(48px) scale(1); }
  100% { opacity: 0; transform: translateY(54px) scale(1.3, 0.4); }
}
@keyframes cafeMarquee {
  to { transform: translate3d(-50%, 0, 0); }
}
@keyframes cafeFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
  50% { transform: translate3d(6px, -16px, 0) rotate(calc(var(--r, 0deg) + 14deg)); }
}
@keyframes cafeTick {
  to { transform: rotate(360deg); }
}
@keyframes cafeFlapOpen {
  0%, 50% { transform: rotateX(0deg); z-index: 3; }
  51% { z-index: 0; }
  100% { transform: rotateX(180deg); z-index: 0; }
}
@keyframes cafeLetterUp {
  to { transform: translateY(-26px); }
}

/* ---------- Hero ---------- */
:root[data-look="cafe"] .cafe-hero-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
}
:root[data-look="cafe"] .cafe-hero-sign__script {
  color: var(--cafe-honey);
  font-family: var(--cafe-font-hand);
  font-size: clamp(30px, 2.8vw, 40px);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 14px rgba(20, 12, 6, 0.55);
  transform: rotate(-4deg);
  animation: cafeWrite 1.5s var(--cafe-ease) 0.35s backwards;
}
:root[data-look="cafe"] .cafe-hero-sign__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(244, 232, 212, 0.85);
  font-family: var(--cafe-font-head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  animation: cafeRise 1s var(--cafe-ease) 0.2s backwards;
}
:root[data-look="cafe"] .cafe-hero-sign__meta::before,
:root[data-look="cafe"] .cafe-hero-sign__meta::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}
:root[data-look="cafe"] .cafe-scroll {
  position: absolute;
  top: 50%;
  left: clamp(20px, 3vw, 44px);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--cafe-foam);
  transform: translateY(-50%);
  pointer-events: none;
  animation: cafeRise 1s var(--cafe-ease) 1.6s backwards;
}
:root[data-look="cafe"] .cafe-scroll span {
  font-family: var(--cafe-font-hand);
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.06em;
  writing-mode: vertical-rl;
}
:root[data-look="cafe"] .cafe-scroll i {
  position: relative;
  display: block;
  width: 1px;
  height: 58px;
  background: linear-gradient(rgba(244, 232, 212, 0.75), rgba(244, 232, 212, 0));
}
:root[data-look="cafe"] .cafe-scroll i::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 7px;
  height: 10px;
  margin-left: -3.5px;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: var(--cafe-honey);
  animation: cafeDrip 2.4s cubic-bezier(0.55, 0, 0.85, 0.45) infinite;
}

/* ---------- Marquee band ---------- */
:root[data-look="cafe"] .cafe-marquee {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 17px 0;
  border-bottom: 1px solid rgba(244, 232, 212, 0.08);
  background: var(--cafe-espresso);
  color: var(--cafe-foam);
}
:root[data-look="cafe"] .cafe-marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: cafeMarquee 44s linear infinite;
}
:root[data-look="cafe"] .cafe-marquee:hover .cafe-marquee__track { animation-play-state: paused; }
:root[data-look="cafe"] .cafe-marquee__item {
  margin-right: 34px;
  font-family: var(--cafe-font-head);
  font-size: clamp(20px, 2vw, 28px);
  font-style: italic;
  line-height: 1.2;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
:root[data-look="cafe"] .cafe-marquee__item--ja {
  font-size: clamp(15px, 1.5vw, 19px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.16em;
}
:root[data-look="cafe"] .cafe-marquee__bean {
  flex: none;
  width: 15px;
  height: 19px;
  margin-right: 34px;
  background: var(--cafe-bean-honey) center / contain no-repeat;
}

/* ---------- Salon: pendant lamps and drifting beans ---------- */
:root[data-look="cafe"] .cafe-lamp {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 96px;
  height: 200px;
  transform-origin: 50% 0;
  animation: cafeSwing 4.8s ease-in-out infinite alternate;
  pointer-events: none;
}
:root[data-look="cafe"] .cafe-lamp--left { left: 8%; }
:root[data-look="cafe"] .cafe-lamp--right { right: 8%; height: 150px; animation-delay: -2.4s; }
:root[data-look="cafe"] .cafe-lamp__cord {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: calc(100% - 52px);
  margin-left: -1px;
  background: #0f0905;
}
:root[data-look="cafe"] .cafe-lamp__shade {
  position: absolute;
  bottom: 18px;
  left: 50%;
  width: 86px;
  height: 42px;
  margin-left: -43px;
  border-radius: 86px 86px 6px 6px / 72px 72px 6px 6px;
  background: linear-gradient(180deg, #c98d4c, #8a4f22 68%, #6b3a16);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}
:root[data-look="cafe"] .cafe-lamp__bulb {
  position: absolute;
  bottom: 8px;
  left: 50%;
  width: 22px;
  height: 14px;
  margin-left: -11px;
  border-radius: 0 0 12px 12px;
  background: #ffe3ad;
  box-shadow: 0 0 20px 7px rgba(255, 208, 136, 0.8);
}
/* Centred on the bulb and fully faded inside its own box, so no edge ever shows. */
:root[data-look="cafe"] .cafe-lamp__glow {
  position: absolute;
  top: calc(100% - 275px);
  left: 50%;
  width: 440px;
  height: 520px;
  margin-left: -220px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(255, 200, 120, 0.24), rgba(255, 200, 120, 0.08) 45%, transparent 100%);
  animation: cafeGlow 3.4s ease-in-out infinite;
}
:root[data-look="cafe"] .cafe-beans {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
:root[data-look="cafe"] .cafe-beans i {
  position: absolute;
  width: 18px;
  height: 23px;
  background: var(--cafe-bean-honey) center / contain no-repeat;
  opacity: 0.5;
  animation: cafeFloat 9s ease-in-out infinite;
}
:root[data-look="cafe"] .cafe-beans i:nth-child(1) { top: 18%; left: 4%; --r: 20deg; }
:root[data-look="cafe"] .cafe-beans i:nth-child(2) { top: 44%; left: 94%; --r: -30deg; animation-delay: -2s; }
:root[data-look="cafe"] .cafe-beans i:nth-child(3) { top: 70%; left: 2.5%; --r: 60deg; animation-delay: -4s; width: 14px; height: 18px; }
:root[data-look="cafe"] .cafe-beans i:nth-child(4) { top: 86%; left: 90%; --r: 10deg; animation-delay: -6s; }
:root[data-look="cafe"] .cafe-beans i:nth-child(5) { top: 30%; left: 88%; --r: 80deg; animation-delay: -3s; width: 12px; height: 15px; opacity: 0.35; }
:root[data-look="cafe"] .cafe-beans i:nth-child(6) { top: 56%; left: 9%; --r: -50deg; animation-delay: -7s; width: 12px; height: 15px; opacity: 0.35; }

/* ---------- How to enjoy: thawing timer ---------- */
:root[data-look="cafe"] .cafe-timer {
  position: absolute;
  top: -52px;
  right: -28px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: var(--cafe-espresso);
  box-shadow: 0 16px 30px rgba(66, 38, 18, 0.3);
  color: var(--cafe-foam);
  transform: rotate(8deg);
}
:root[data-look="cafe"] .cafe-timer::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(244, 232, 212, 0.3);
  border-radius: 50%;
}
:root[data-look="cafe"] .cafe-timer__clock {
  position: relative;
  width: 30px;
  height: 30px;
  margin-bottom: 6px;
  border: 1.5px solid rgba(244, 232, 212, 0.75);
  border-radius: 50%;
}
:root[data-look="cafe"] .cafe-timer__clock::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  background: var(--cafe-honey);
}
:root[data-look="cafe"] .cafe-timer__clock i {
  position: absolute;
  top: 2.5px;
  left: 50%;
  width: 1.5px;
  height: 11px;
  margin-left: -0.75px;
  border-radius: 2px;
  background: var(--cafe-honey);
  transform-origin: 50% 100%;
  animation: cafeTick 4s linear infinite;
}
:root[data-look="cafe"] .cafe-timer__text {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1px;
  font-family: var(--cafe-font-note);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.06em;
}
:root[data-look="cafe"] .cafe-timer__text b {
  color: var(--cafe-honey);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---------- Store: hanging welcome sign ---------- */
:root[data-look="cafe"] .cafe-open-sign {
  position: absolute;
  top: 0;
  right: 11%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 168px;
  transform-origin: 50% 0;
  animation: cafeSwing 3.6s ease-in-out infinite alternate;
  pointer-events: none;
}
:root[data-look="cafe"] .cafe-open-sign__strings {
  display: block;
  width: 118px;
  height: 46px;
  fill: none;
  stroke: #ead6b4;
  stroke-width: 1.6;
}
:root[data-look="cafe"] .cafe-open-sign__board {
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 100%;
  margin-top: -3px;
  padding: 12px 10px 13px;
  border: 2px solid rgba(63, 38, 20, 0.5);
  border-radius: 12px;
  background:
    repeating-linear-gradient(8deg, rgba(90, 55, 30, 0.08) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #e9cfa6, #d2ae7c);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.38);
  color: var(--cafe-espresso);
}
:root[data-look="cafe"] .cafe-open-sign__board b {
  font-family: var(--cafe-font-head);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
}
:root[data-look="cafe"] .cafe-open-sign__board small {
  color: var(--cafe-caramel-deep);
  font-family: var(--cafe-font-hand);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Mail magazine: an envelope that opens ---------- */
:root[data-look="cafe"] .cafe-envelope {
  position: relative;
  width: 96px;
  height: 64px;
  margin: 0 auto 26px;
  perspective: 420px;
}
:root[data-look="cafe"] .cafe-envelope__letter {
  position: absolute;
  top: 6px;
  left: 10px;
  right: 10px;
  z-index: 1;
  height: 50px;
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 4px;
  background: #fffdf8;
  box-shadow: 0 2px 6px rgba(66, 38, 18, 0.12);
}
:root[data-look="cafe"] .cafe-envelope__letter i {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: rgba(176, 101, 43, 0.4);
}
:root[data-look="cafe"] .cafe-envelope__letter i:nth-child(2) { width: 70%; }
:root[data-look="cafe"] .cafe-envelope__letter i:nth-child(3) { width: 45%; }
:root[data-look="cafe"] .cafe-envelope__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 6px;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(90, 55, 30, 0.22) 50%, transparent calc(50% + 1px)) left bottom / 50% 60% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), rgba(90, 55, 30, 0.22) 50%, transparent calc(50% + 1px)) right bottom / 50% 60% no-repeat,
    linear-gradient(180deg, #e2c69b, #d4b17f);
  -webkit-mask: linear-gradient(#000 0 0) bottom / 100% 62% no-repeat;
  mask: linear-gradient(#000 0 0) bottom / 100% 62% no-repeat;
}
:root[data-look="cafe"] .cafe-envelope__back {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 6px;
  background: #c9a26d;
}
:root[data-look="cafe"] .cafe-envelope__flap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 40px;
  background: linear-gradient(180deg, #d9b988, #c9a26d);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
}
:root[data-look="cafe"] .cafe-envelope__seal {
  position: absolute;
  top: 28px;
  left: 50%;
  z-index: 4;
  width: 18px;
  height: 18px;
  margin-left: -9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d8674a, var(--cafe-terracotta) 60%, #7a2c19);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
:root[data-look="cafe"] .is-cafe-in .cafe-envelope__flap { animation: cafeFlapOpen 0.8s var(--cafe-ease) 0.5s forwards; }
:root[data-look="cafe"] .is-cafe-in .cafe-envelope__seal { animation: cafeIntroFade 0.3s ease 0.45s forwards; }
:root[data-look="cafe"] .is-cafe-in .cafe-envelope__letter { animation: cafeLetterUp 0.9s var(--cafe-ease) 1.1s forwards; }

/* ---------- Footer sign ---------- */
:root[data-look="cafe"] .cafe-footer-sign {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0 0 40px;
}
:root[data-look="cafe"] .cafe-footer-sign__cup {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--cafe-caramel);
  color: #fff8ee;
}
:root[data-look="cafe"] .cafe-footer-sign__cup svg { width: 26px; height: 26px; }
:root[data-look="cafe"] .cafe-footer-sign__brand {
  color: var(--cafe-foam);
  font-family: var(--cafe-font-head);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
}
:root[data-look="cafe"] .cafe-footer-sign__script {
  color: var(--cafe-honey);
  font-family: var(--cafe-font-hand);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 700;
  line-height: 1.1;
}

/* ---------- Small screens ---------- */
@media (max-width: 1100px) {
  :root[data-look="cafe"] .cafe-lamp--right { display: none; }
  :root[data-look="cafe"] .cafe-lamp--left { left: 4%; height: 130px; }
}
@media (max-width: 760px) {
  :root[data-look="cafe"] .cafe-hero-sign { gap: 8px; margin-bottom: 16px; }
  :root[data-look="cafe"] .cafe-hero-sign__meta { font-size: 9px; letter-spacing: 0.3em; }
  :root[data-look="cafe"] .cafe-hero-sign__meta::before,
  :root[data-look="cafe"] .cafe-hero-sign__meta::after { width: 20px; }
  :root[data-look="cafe"] .cafe-scroll { display: none; }
  :root[data-look="cafe"] .cafe-timer__clock { width: 26px; height: 26px; margin-bottom: 4px; }
  :root[data-look="cafe"] .cafe-timer__clock i { height: 9px; }
  :root[data-look="cafe"] .cafe-marquee { padding: 13px 0; }
  :root[data-look="cafe"] .cafe-lamp { display: none; }
  :root[data-look="cafe"] .cafe-timer { top: -86px; right: -4px; width: 104px; height: 104px; }
  :root[data-look="cafe"] .cafe-timer__text b { font-size: 15px; }
  :root[data-look="cafe"] .cafe-open-sign { right: 7%; width: 136px; }
  :root[data-look="cafe"] .cafe-open-sign__strings { width: 94px; height: 36px; }
  :root[data-look="cafe"] .cafe-open-sign__board b { font-size: 17px; }
  :root[data-look="cafe"] .cafe-open-sign__board small { font-size: 16px; }
}