/* Local assets and system fonts keep playback independent of other services. */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #18120e;
  color: #fff5e4;
  font-family: Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
button { font: inherit; }
#slideshow { position: relative; width: 100%; height: 100%; overflow: hidden; }
.slides, .slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.slide {
  background: #18120e;
  opacity: 0;
  visibility: hidden;
  transition: opacity 650ms ease, visibility 0s 650ms;
}
.slide.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
.photo-field { position: absolute; top: 0; left: 0; bottom: 0; width: 65.5%; overflow: hidden; }
.photo-ambience {
  position: absolute;
  top: -6%; left: -6%; width: 112%; height: 112%;
  background-size: cover;
  background-position: center;
  opacity: .28;
  filter: blur(30px);
  -webkit-filter: blur(30px);
}
[data-slide="0"] .photo-ambience { background-image: url('assets/honey-granola-banana-breakfast-plate.jpg'); }
[data-slide="1"] .photo-ambience { background-image: url('assets/big-breakfast.png'); }
[data-slide="2"] .photo-ambience { background-image: url('assets/chicken-steak.jpg'); }
[data-slide="3"] .photo-ambience { background-image: url('assets/nasi-goreng.jpg'); }
[data-slide="4"] .photo-ambience { background-image: url('assets/pancake.jpg'); }
[data-slide="5"] .photo-ambience { background-image: url('assets/tropical-dragon-fruit-smoothie-bowl.png'); }
.photo-field::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, rgba(24,18,14,.08) 65%, #18120e 100%);
  pointer-events: none;
}
.photo-wrap {
  position: absolute;
  top: 4.5%; bottom: 4.5%; left: 6.9%; right: 4%;
  z-index: 1;
}
.dish-photo {
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  /* The original photo, including the edge of every dish, stays in view. */
}
.dish-panel {
  position: absolute;
  left: 67%; right: 4.5%; top: 30%; bottom: 17%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.dish-name {
  margin: 0;
  width: 100%;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 4.2vw;
  line-height: 1.12;
  letter-spacing: -.035em;
  overflow-wrap: normal;
  text-wrap: balance;
}
.brand { position: absolute; left: 67%; right: 4.5%; top: 8%; z-index: 2; }
.brand-name { display: block; font-size: 1.87vw; font-weight: 700; letter-spacing: .075em; line-height: 1.2; }
.brand-location { display: block; margin-top: 1.1vh; color: #c5ae87; font-size: 1.08vw; letter-spacing: .28em; line-height: 1.3; }
.brand-rule { position: absolute; left: 67%; top: 24%; width: 3.7vw; height: 2px; background: #b79a65; z-index: 2; }
.slide-markers { position: absolute; left: 67%; bottom: 8%; display: -webkit-flex; display: flex; gap: .62vw; z-index: 2; }
.slide-markers span { display: block; width: .48vw; height: .48vw; min-width: 5px; min-height: 5px; margin-right: .62vw; background: #62513d; border-radius: 50%; }
.slide-markers .is-current { background: #e5c692; }
.slide-markers span.is-unavailable { opacity: .2; }
.state-message {
  position: absolute; top: 40%; left: 9%; right: 9%; z-index: 4;
  text-align: center; font-family: Georgia, "Times New Roman", serif;
  font-size: 3.2vw; line-height: 1.3;
}
#slideshow[data-state="empty"] .slides,
#slideshow[data-state="empty"] .brand-rule,
#slideshow[data-state="empty"] .slide-markers,
#slideshow[data-state="loading"] .slide-markers { visibility: hidden; }
#slideshow[data-state="empty"] .brand { left: 9%; right: 9%; text-align: center; }
.controls {
  position: absolute; z-index: 10; left: 50%; bottom: 4.5%;
  -webkit-transform: translateX(-50%); transform: translateX(-50%);
  padding: .8vw 1vw;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  background: rgba(13,10,8,.94);
  border: 1px solid #65543c;
  border-radius: 10px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 180ms ease, visibility 0s 180ms;
  white-space: nowrap;
}
#slideshow[data-controls-visible="true"] .controls { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.controls button { min-width: 3.2vw; padding: .55vw .85vw; margin: 0 .2vw; border: 1px solid #85704f; border-radius: 5px; background: #2e2419; color: #fff5e4; font-size: 1.15vw; cursor: pointer; }
.controls button:hover, .controls button:focus { outline: 3px solid #e5c692; outline-offset: 2px; background: #514027; }
.controls button:disabled { opacity: .45; cursor: default; }
.key-hint { margin-left: 1vw; color: #d1c3ac; font-size: .88vw; }
.control-message, .noscript-message { position: absolute; z-index: 11; left: 15%; right: 15%; bottom: 15%; text-align: center; padding: 1vw; background: rgba(13,10,8,.94); font-size: 1.5vw; }
@media (max-aspect-ratio: 4/3) {
  .photo-field { width: 100%; height: 67%; bottom: auto; }
  .photo-wrap { top: 7%; bottom: 3%; left: 5%; right: 5%; }
  .photo-field::after { background: linear-gradient(180deg, transparent 75%, #18120e 100%); }
  .brand { left: 5%; right: 5%; top: 70%; }
  .brand-name { font-size: 3.1vw; }
  .brand-location { display: none; }
  .brand-rule { left: 5%; top: 77%; width: 7vw; }
  .dish-panel { left: 5%; right: 5%; top: 80%; bottom: 6%; }
  .dish-name { font-size: 5vw; line-height: 1.05; }
  .dish-name br { display: none; }
  .slide-markers { left: auto; right: 5%; bottom: auto; top: 72%; }
  .controls { bottom: 2%; padding: 1.3vw; }
  .controls button { font-size: 2.5vw; padding: 1.2vw 1.6vw; }
  .key-hint { display: none; }
  .control-message, .noscript-message { font-size: 3vw; }
}
@media (prefers-reduced-motion: reduce) { .slide, .controls { transition: none; } }