/* Motion layer for the original OBAIA site. Layout and content stay in its HTML. */
:root { --obaia-ease: cubic-bezier(.16,1,.3,1); }
html { scroll-padding-top: 105px; }

/* The stage follows its content; the scroll distance is measured in JS. */
.ab { color: var(--baie); position: relative; isolation: isolate; }
.ab-stage {
  position: sticky; top: 0; display: flex; flex-direction: column;
  align-items: center; padding: clamp(100px,14svh,132px) 16px 24px;
  overflow: clip; pointer-events: none;
}
.ab-title {
  --ab-title: clamp(64px,min(23vw,20svh),174px);
  font-family: var(--font); font-size: var(--ab-title); font-weight: 800;
  line-height: .92; text-transform: uppercase; text-align: center;
  letter-spacing: -.045em; position: relative; z-index: 1;
}
.ab-line { display: block; position: relative; width: fit-content; margin-inline: auto; white-space: nowrap; }
.ab-ch { display: inline-block; }
.ab-mini {
  position: absolute; right: 0; bottom: -1.65em; font-size: 11px;
  font-weight: 600; letter-spacing: .08em; line-height: 1; text-transform: lowercase;
}
.ab-bowl {
  position: relative; z-index: 2; flex: none;
  width: min(76svh,96vw,740px); aspect-ratio: 3 / 2;
  margin-top: calc(var(--ab-title,100px) * -.18); will-change: transform;
}
.ab-bowl img { display: block; width: 100%; height: auto; object-fit: contain; }
.ab.ab-js .ab-ch { opacity: 0; transform: translateY(.4em) rotate(3deg); }
.ab.ab-js .ab-bowl img { opacity: 0; transform: translateY(36px) scale(.96); }
.ab.ab-js.ab-in .ab-ch {
  opacity: 1; transform: none;
  transition: transform 1s var(--obaia-ease),opacity .8s ease;
  transition-delay: calc(var(--i) * 45ms);
}
.ab.ab-js.ab-in .ab-bowl img {
  opacity: 1; transform: none;
  transition: transform 1.2s var(--obaia-ease) .22s,opacity .9s ease .22s;
}
#acai-bowl + .temporada {
  position: relative; z-index: 3; padding-top: clamp(28px,4vw,56px);
}

/* Original sections keep their rhythm, with staggered entrances. */
.motion-reveal {
  opacity: 1; transform: none;
  transition: opacity .85s ease,transform 1.1s var(--obaia-ease);
}
.motion-ready .motion-reveal:not(.motion-seen) { opacity: 0; transform: translateY(32px); }
.motion-ready .motion-reveal { transition-delay: var(--motion-delay,0ms); }
.motion-heading { transition: clip-path 1.15s var(--obaia-ease),transform 1.15s var(--obaia-ease); }
.motion-ready .motion-heading:not(.motion-seen) { clip-path: inset(0 0 100% 0); transform: translateY(22px); }
.motion-ready .motion-heading.motion-seen { clip-path: inset(-15% -2% -15% -2%); transform: none; }
.productos-divider,.historia-divider { transform-origin: left; transition: transform 1s var(--obaia-ease) .2s; }
.fade-up:not(.is-visible) .productos-divider,.fade-up:not(.is-visible) .historia-divider { transform: scaleX(0); }
.season-img-wrap,.producto-img-wrap { transition: transform .8s var(--obaia-ease); }
.season-img-wrap img { transition: transform 1.2s var(--obaia-ease); }
.season-card:hover .season-img-wrap img { transform: scale(1.045); }
.season-slider { overscroll-behavior-x: contain; }
.season-slider.is-draggable { cursor: grab; }
.season-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.season-slider img { -webkit-user-drag: none; }
.nav-link { position: relative; }
.nav-link::after {
  content: ''; position: absolute; height: 1px; left: 0; right: 0; bottom: -6px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--obaia-ease);
}
.nav-link:hover::after,.nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { transition: transform .4s var(--obaia-ease),background-color .3s ease; }
.nav-cta:hover { transform: translateY(-3px); }

/* A brief branded curtain links the home page and the menu. */
.obaia-wipe {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  background: var(--baie,#751b38); transform: translate3d(0,101%,0);
  pointer-events: none; visibility: hidden;
  /* Reset offscreen instantly once the completed curtain is hidden. */
}
.obaia-wipe img { width: min(40vw,220px); height: auto; }
.obaia-leaving .obaia-wipe {
  visibility: visible; transform: translate3d(0,0,0); transition: transform .46s cubic-bezier(.45,0,.36,1);
}
.obaia-arriving .obaia-wipe {
  visibility: visible; transform: translate3d(0,0,0);
}
.obaia-arriving.wipe-ready .obaia-wipe {
  animation: obaia-wipe-away .65s cubic-bezier(.45,0,.28,1) both;
}
@keyframes obaia-wipe-away { from {transform:translate3d(0,0,0)} to {transform:translate3d(0,-101%,0)} }

@font-face {
  font-family: 'OBAIA Intro'; src: url('./brand/Montserrat-Regular.ttf') format('truetype'); font-display: swap;
}
.fruit-intro { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .home-intro-enabled .fruit-intro {
    position: fixed; inset: 0; z-index: 10001; display: grid; place-items: center;
    overflow: hidden; background: var(--white,#fffbf0); color: var(--baie,#751b38);
    animation: intro-failsafe 0s 6s forwards;
  }
}
@keyframes intro-failsafe { to { visibility: hidden; } }
.fruit-intro output { font: 400 clamp(66px,9vw,154px)/1 'OBAIA Intro',Montserrat,sans-serif; letter-spacing: -.075em; font-variant-numeric: tabular-nums; }
.intro-brand { position:absolute; top:7%; left:50%; transform:translateX(-50%); width:clamp(85px,9vw,144px); }
.fruit-pile { position:absolute; inset:0; overflow:hidden; }
.fruit-pile > img { position:absolute; height:auto; aspect-ratio:162 / 191; }
.fruit-intro::after { content:''; position:absolute; inset:0; background:var(--baie); transform:translateY(101%); transition:transform .45s cubic-bezier(.45,0,.35,1); }
.fruit-intro.covered::after { transform:none; }
.fruit-intro.uncover { transform:translateY(-101%); transition:transform .5s cubic-bezier(.45,0,.28,1); }

@media (hover:hover) and (pointer:fine) {
  .motion-tilt { transform: perspective(1000px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg)); }
}
@media (max-width:767px) {
  .ab-stage { padding-top: 100px; padding-bottom: 14px; }
  .ab-bowl { margin-top: -8px; }
  #mobile-menu {
    position: fixed; inset: 0; z-index: -1; margin: 0; border: 0; border-radius: 0;
    background: var(--baie); color: var(--white); box-shadow: none;
    padding: 110px 28px 40px; display: flex; align-items: center;
    transform: translate3d(0,-102%,0); transition: transform .6s cubic-bezier(.76,0,.24,1);
  }
  #mobile-menu.hidden { display: none; }
  #mobile-menu .flex-col { width: 100%; gap: 20px; align-items: flex-start; }
  #mobile-menu a {
    color: var(--white); font-size: clamp(26px,8vw,48px); font-weight: 800;
    letter-spacing: -.035em; line-height: 1.2;
    opacity: 0; transform: translateY(24px);
    transition: opacity .3s ease,transform .6s var(--obaia-ease);
  }
  #mobile-menu a:nth-child(even) { align-self: flex-end; }
  .menu-open #mobile-menu { transform: none; }
  .menu-open #mobile-menu a { opacity: 1; transform: none; transition-delay: calc(var(--menu-i) * 55ms + 120ms); }
  .menu-open #nav-inner,.menu-closing #nav-inner {
    background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none;
  }
  .menu-open .nav-logo,.menu-open #mobile-menu-btn,
  .menu-closing .nav-logo,.menu-closing #mobile-menu-btn { color: var(--white); }
  #mobile-menu-btn { position: relative; z-index: 2; }
  .menu-open #mobile-menu-btn svg { opacity: 0; }
  .menu-open #mobile-menu-btn::before,.menu-open #mobile-menu-btn::after {
    content: ''; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px;
    background: currentColor; transform: rotate(45deg);
  }
  .menu-open #mobile-menu-btn::after { transform: rotate(-45deg); }
  .temporada,.productos,.historia,.resenas { padding-bottom: 56px; }
  .section-layout { gap: 28px; }
  .section-title { font-size: clamp(2.5rem,10vw,4rem); }
  .menu-header { padding-top: 110px; padding-bottom: 24px; }
}
@media (max-height:560px) and (min-width:768px) {
  .ab-stage { padding-top: 90px; }
  .ab-title { --ab-title: min(19svh,130px); }
  .ab-bowl { width: min(80svh,540px); }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto !important; }
  *,*::before,*::after { animation-duration: .001ms !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .ab { height: auto !important; margin-bottom: 0 !important; }
  .ab-stage { position: relative; }
  .ab-title,.ab-bowl,.ab-ch,.ab-bowl img,.fade-up,.motion-reveal,.motion-heading {
    transform: none !important; opacity: 1 !important; clip-path: none !important;
  }
  .obaia-wipe { display: none; }
}