/* =========================================================
   Time-of-Day Homepage
   Five "phases" — each with own image, palette, dish, CTA.
   Auto-detect by hour, override via dial.
   Below the fold: manifesto + four-worlds strip + footer.
   ========================================================= */

.home {
  position: relative;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  transition: background var(--t-slow) ease, color var(--t-slow) ease;
}

/* ---------- Hero (phase) ------------------------------------- */
.home__hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 720px;
  max-height: 940px;
  overflow: hidden;
}
@media (min-width: 720px) {
  .home { min-height: 0; }
  .home__hero {
    /* Match the .app height — bezel was removed so the previous 24px
       offset (for border) is gone; hero fills the phone exactly. */
    height: min(844px, calc(100dvh - 64px));
    min-height: 0;
    max-height: none;
  }
}

.phase-image {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64%;
  opacity: 0;
  transition: opacity var(--t-glide) var(--ease-out);
}
.phase-image.is-active { opacity: 1; }

.phase-image__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Ken Burns: photo starts zoomed-in and slightly offset, then slowly
     drifts to its resting position when the phase becomes active. */
  transform: scale(1.18) translate(2%, 1.5%);
  transition: transform 14s ease-out;
  filter: saturate(0.92) contrast(0.98);
  opacity: 0.92;
}
.phase-image.is-active .phase-image__bg {
  transform: scale(1) translate(0, 0);
}

.phase-image__gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ---------- Headline block (over hero image) ----------------- */
.home__headline-block {
  position: absolute;
  left: 0; right: 0;
  bottom: 38%;
  padding: 0 var(--gutter-body);
  color: #fff;
  z-index: 5;
}
.home__eye {
  display: block;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  /* Adapts per phase — dark on light phases (readable on the cream
     gradient), light on dark phases. */
  color: var(--phase-ink, var(--ink));
  opacity: 0.85;
  margin-bottom: 16px;
  transition: color var(--t-slow) ease;
}
.home__headline {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  color: var(--phase-ink, var(--ink));
  transition: color var(--t-slow) ease;
}
.home__headline em {
  font-style: italic;
  color: var(--phase-accent, var(--blush));
  font-weight: 400;
}
.home__headline-block.is-changing {
  animation: lbFadeUp 0.9s var(--ease) both;
}

/* ---------- Lower paper panel (phase chooser + dish + CTA) --- */
.home__panel {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 38%;
  background: var(--phase-paper, var(--paper));
  color: var(--phase-ink, var(--ink));
  padding: 22px var(--gutter-body) 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background-color var(--t-slow) ease, color var(--t-slow) ease;
}
/* Feather strip just above the panel — solid panel-color masked by a
   constant alpha gradient. Using `background-color` (not a gradient
   in `background-image`) means the COLOR transitions smoothly between
   phases; the FEATHER shape lives in the mask, which never changes,
   so phase switches no longer flash. */
.home__panel::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -32px;
  height: 32px;
  background-color: var(--phase-paper, var(--paper));
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 100%);
          mask-image: linear-gradient(180deg, transparent 0%, black 100%);
  pointer-events: none;
  transition: background-color var(--t-slow) ease;
}
.home--dark .home__panel {
  --phase-headline-em-color: var(--phase-accent);
}

.home__status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
}
.home--dark .home__status { border-bottom-color: rgba(255, 255, 255, 0.18); }
.home__status-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: rgba(28, 31, 26, 0.55);
}
.home--dark .home__status-label { color: rgba(255, 255, 255, 0.55); }
.home__live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3a8f4d;
  box-shadow: 0 0 8px rgba(58, 143, 77, 0.7);
  animation: lbPulse 2s ease infinite;
  flex-shrink: 0;
}
.home__now-btn {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: rgba(28, 31, 26, 0.4);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.home--dark .home__now-btn { color: rgba(255, 255, 255, 0.4); }
.home__now-btn.is-active { color: var(--phase-accent); }

/* ---------- Phase dial --------------------------------------- */
.phase-dial {
  display: flex;
  gap: 6px;
  justify-content: space-between;
}
.phase-dial__btn {
  flex: 1;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px 0 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: inherit;
  position: relative;
}
.phase-dial__icon {
  opacity: 0.5;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease), color var(--t-med) var(--ease);
  color: rgba(28, 31, 26, 0.7);
  display: inline-flex;
}
.home--dark .phase-dial__icon { color: rgba(255, 255, 255, 0.7); }
.phase-dial__label {
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(28, 31, 26, 0.45);
  transition: color var(--t-med) var(--ease);
}
.home--dark .phase-dial__label { color: rgba(255, 255, 255, 0.4); }

.phase-dial__btn.is-active .phase-dial__icon {
  opacity: 1;
  transform: scale(1.1);
  color: var(--phase-accent);
}
.phase-dial__btn.is-active .phase-dial__label {
  color: var(--phase-accent);
}
.phase-dial__btn.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 20%; right: 20%;
  height: 1px;
  background: var(--phase-accent);
}

/* ---------- Description + dish + CTA ------------------------- */
.home__sub {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.45;
  color: rgba(28, 31, 26, 0.7);
}
.home--dark .home__sub { color: rgba(245, 242, 236, 0.78); }

.home__cta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  gap: 12px;
}
.home__dish-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.home__dish-eye {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(28, 31, 26, 0.45);
}
.home--dark .home__dish-eye { color: rgba(255, 255, 255, 0.45); }
.home__dish {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 17px;
  font-weight: 500;
  color: var(--phase-accent);
}

.btn--phase {
  background: var(--phase-accent);
  color: #fff;
}
.home[data-phase="dinner"] .btn--phase { color: var(--ink); }

/* `.home__prenota` styles moved to chrome.css so they're available
   on every page (home, ristorante, …) without needing to load home.css. */

/* ---------- Below fold (manifesto + worlds + footer) --------- */
.below {
  position: relative;
  width: 100%;
  background: var(--paper);
  color: var(--ink);
}

.manifesto {
  padding: 54px var(--gutter-body) 38px;
  border-top: 1px solid var(--hairline-soft);
}
.manifesto__eye {
  display: block;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(28, 31, 26, 0.5);
  margin-bottom: 14px;
}
.manifesto__text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.worlds {
  padding-bottom: 64px;
}
.worlds__head {
  padding: 0 var(--gutter-body);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.worlds__head .eyebrow { color: rgba(28, 31, 26, 0.5); font-weight: 600; }
.worlds__hint {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: rgba(28, 31, 26, 0.4);
}

.worlds__strip {
  display: flex;
  gap: 14px;
  padding: 0 var(--gutter-body) 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-padding-left: var(--gutter-body);
}

.world-card {
  flex: 0 0 auto;
  width: 244px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.world-card__photo {
  width: 244px;
  height: 244px;
  position: relative;
  background: #cdc6b8;
  overflow: hidden;
}
.world-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(0.98);
  transition: transform var(--t-slow) ease;
}
/* Top-down dark vignette so the tag stays readable on bright photos. */
.world-card__photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.15) 40%,
    transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.world-card:hover .world-card__photo img { transform: scale(1.04); }
.world-card__tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.world-card__meta { display: flex; flex-direction: column; gap: 6px; }
.world-card__row { display: flex; align-items: baseline; justify-content: space-between; }
.world-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.world-card__arrow {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--terracotta);
  transform: translateY(-1px);
}
.world-card__teaser {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(28, 31, 26, 0.7);
}