/**
 * Home / hero: primeira cena unificada com a navegação.
 * Sem fundo animado nesta etapa; a direção de arte será decidida separadamente.
 */
.upkate-front .site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.17);
  box-shadow: none;
  transition: transform .3s ease, background-color .25s ease,
    border-color .25s ease, box-shadow .25s ease;
}
.upkate-front .site-header[data-scroll-state="default"] {
  background: transparent;
  border-bottom-color: rgba(255,255,255,.17);
  box-shadow: none;
}
.upkate-front .site-header[data-scroll-state="up"] {
  background: var(--uk-purple);
  border-bottom-color: transparent;
  box-shadow: 0 8px 25px rgba(18,39,43,.18);
}
.upkate-front .site-header[data-scroll-state="down"] {
  background: var(--uk-purple);
  border-bottom-color: transparent;
  box-shadow: none;
}

/* WordPress admin bar must not cover the header during local review. */
.admin-bar.upkate-front .site-header { top: 32px; }

.upkate-front .uk-hero {
  /* The hero and overlaid header form one complete first scene. */
  min-height: 100svh;
  padding-top: var(--uk-overlay-header-height, 110px);
  padding-bottom: 0;
}
.upkate-front .uk-hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: calc(100svh - var(--uk-overlay-header-height, 110px));
  align-items: stretch;
  gap: clamp(2rem, 4vw, 4.25rem);
}
.upkate-front .uk-hero__content {
  align-self: center;
  padding-block: clamp(2rem, 4vw, 4rem);
}
.upkate-front .uk-hero__visual {
  align-self: end;
  width: 100%;
  max-width: 610px;
  margin-inline: auto 0;
}
.upkate-front .uk-hero__photo {
  display: block;
  width: 100%;
  min-height: 0;
  height: auto;
  /* Source is 1038×770; 0.75 crops from about x=460, beyond baked-in text,
     but before the portrait and the brand's diagonal shapes start. */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}
.upkate-front .uk-hero__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom;
}

@media (max-width: 980px) {
  .upkate-front .uk-hero__inner { gap: clamp(1.5rem, 3vw, 2.5rem); }
  .upkate-front .uk-hero__visual { max-width: 490px; }
}
@media (max-width: 760px) {
  .upkate-front .uk-hero {
    min-height: auto;
    padding-top: calc(var(--uk-overlay-header-height, 150px) + 1.75rem);
    padding-bottom: 0;
  }
  .upkate-front .uk-hero__inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
  .upkate-front .uk-hero__content {
    padding-block: 1rem 0;
  }
  .upkate-front .uk-hero__visual {
    width: min(100%, 410px);
    max-width: 410px;
    margin-inline: auto;
  }
}
@media (max-width: 480px) {
  .upkate-front .uk-hero__visual {
    width: min(100%, 330px);
    max-width: 330px;
  }
}

@media (max-width: 600px) {
  /* On narrow phones the WP admin bar scrolls with the document. */
  .admin-bar.upkate-front .site-header[data-scroll-state="up"] { top: 0; }
}
@media (max-width: 480px) {
  .upkate-front .uk-hero__visual { max-width: 305px; }
}
@media (max-width: 782px) and (min-width: 601px) {
  .admin-bar.upkate-front .site-header { top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .upkate-front .site-header { transition: none; }
}


/* ─────────────────────────────────────────────────────────────
   Cena de conversa em três camadas
   As imagens originais compartilham EXATAMENTE o mesmo canvas.
   Nunca anime position/background-size separadamente: apenas
   transform em cada plano, para preservar o alinhamento.
   ───────────────────────────────────────────────────────────── */
.upkate-front .uk-hero--layered {
  position: relative;
  isolation: isolate;
  background: var(--uk-purple); /* fallback enquanto as imagens carregam */
  overflow: hidden;
}
.upkate-front .uk-hero--layered .uk-hero__scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.uk-hero--layered .uk-scene__plane,
.uk-hero--layered .uk-scene__wash,
.uk-hero--layered .uk-scene__light {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.uk-hero--layered .uk-scene__plane { overflow: hidden; }
.uk-hero--layered .uk-scene__plane--room { z-index: 0; }
.uk-hero--layered .uk-scene__plane--plants { z-index: 1; }
.uk-hero--layered .uk-scene__plane--lounge { z-index: 2; }
.uk-hero--layered .uk-scene__plane img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  -webkit-user-drag: none;
  user-select: none;
}
/* Overlays fixam a legibilidade sem escurecer a foto da Kate:
   as imagens de cena ficam atrás do conteúdo e da Kate. */
.uk-hero--layered .uk-scene__wash {
  z-index: 3;
  background:
    linear-gradient(90deg,
      rgba(29, 11, 39, .89) 0%,
      rgba(41, 18, 49, .81) 25%,
      rgba(51, 22, 58, .67) 40%,
      rgba(61, 24, 56, .30) 67%,
      rgba(41, 17, 53, .25) 100%),
    linear-gradient(115deg,
      rgba(185, 71, 106, .22) 0%,
      transparent 58%,
      rgba(75, 48, 104, .22) 100%);
}
.uk-hero--layered .uk-scene__light {
  z-index: 4;
  opacity: .65;
  background:
    radial-gradient(ellipse 38% 44% at 8% 76%,
      rgba(185, 71, 106, .32), transparent 84%),
    radial-gradient(ellipse 33% 40% at 83% 19%,
      rgba(246, 207, 169, .18), transparent 87%),
    radial-gradient(ellipse 28% 22% at 59% 79%,
      rgba(75, 48, 104, .20), transparent 87%);
}
.upkate-front .uk-hero--layered .uk-hero__inner {
  position: relative;
  z-index: 1;
}
.upkate-front .uk-hero--layered .uk-hero__content {
  position: relative;
  z-index: 3;
  text-shadow: 0 1px 12px rgba(30, 12, 39, .11);
}
.upkate-front .uk-hero--layered .uk-hero__visual {
  position: relative;
  z-index: 2;
}

/* Uma montagem de aproximadamente dois segundos, sem bibliotecas.
   O fill-mode 'both' mantém os planos invisíveis até sua entrada. */
@keyframes uk-scene-arrive {
  from { opacity: 0; transform: translate3d(0, 14px, 0) scale(1.025); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes uk-scene-copy-arrive {
  from { opacity: 0; transform: translate3d(0, 19px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes uk-scene-portrait-arrive {
  from { opacity: 0; transform: translate3d(22px, 15px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* Infinite + alternate: movimento sem saltos entre o último
   e o primeiro frame de cada ciclo. */
@keyframes uk-room-breathe {
  from { transform: translate3d(-.85%, .25%, 0) scale(1.065); }
  to   { transform: translate3d(.9%, -.55%, 0) scale(1.08); }
}
@keyframes uk-plants-breathe {
  from { transform: translate3d(-1.1%, .65%, 0) scale(1.025); }
  to   { transform: translate3d(1.25%, -.8%, 0) scale(1.05); }
}
@keyframes uk-lounge-breathe {
  from { transform: translate3d(.95%, .4%, 0) scale(1.025); }
  to   { transform: translate3d(-.85%, -.35%, 0) scale(1.05); }
}
@keyframes uk-light-breathe {
  from { opacity: .46; transform: translate3d(-1.4%, .25%, 0) scale(1); }
  to   { opacity: .9; transform: translate3d(1.5%, -.8%, 0) scale(1.04); }
}

.uk-hero--layered .uk-scene__plane--room {
  animation: uk-scene-arrive .70s ease-out 0s both;
}
.uk-hero--layered .uk-scene__plane--plants {
  animation: uk-scene-arrive .65s ease-out .38s both;
}
.uk-hero--layered .uk-scene__plane--lounge {
  animation: uk-scene-arrive .70s ease-out .76s both;
}
.uk-hero--layered .uk-scene__plane--room img {
  animation: uk-room-breathe 28s ease-in-out 2.3s infinite alternate both;
}
.uk-hero--layered .uk-scene__plane--plants img {
  animation: uk-plants-breathe 19s ease-in-out 2.3s infinite alternate both;
}
.uk-hero--layered .uk-scene__plane--lounge img {
  animation: uk-lounge-breathe 24s ease-in-out 2.3s infinite alternate both;
}
.uk-hero--layered .uk-scene__light {
  animation: uk-light-breathe 15s ease-in-out 2.3s infinite alternate both;
}
.upkate-front .uk-hero--layered .uk-hero__content {
  animation: uk-scene-copy-arrive .70s ease-out 1.22s both;
}
.upkate-front .uk-hero--layered .uk-hero__visual {
  animation: uk-scene-portrait-arrive .78s ease-out 1.42s both;
}

@media (max-width: 760px) {
  .uk-hero--layered .uk-scene__plane img {
    /* As três imagens devem usar o mesmo ponto focal para não desalinharem. */
    object-position: 58% center;
  }
  .uk-hero--layered .uk-scene__wash {
    background:
      linear-gradient(180deg,
        rgba(34, 13, 43, .90) 0%,
        rgba(42, 16, 51, .84) 40%,
        rgba(51, 19, 59, .61) 72%,
        rgba(51, 19, 59, .40) 100%),
      rgba(185, 71, 106, .12);
  }
}
@media (prefers-reduced-motion: reduce) {
  .uk-hero--layered .uk-scene__plane,
  .uk-hero--layered .uk-scene__plane img,
  .uk-hero--layered .uk-scene__light,
  .upkate-front .uk-hero--layered .uk-hero__content,
  .upkate-front .uk-hero--layered .uk-hero__visual {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}