/*
 * Only Upwards — homepage hero 3D monogram.
 * Loaded after the Webflow CSS and after theme.css. Homepage only.
 */

/* ------------------------------------------------------------------ */
/* Neutralize the legacy blue "glass bowl" hero background + black fade
   (both live in the Webflow CSS, so they must be overridden here).    */
/* ------------------------------------------------------------------ */
.hero {
  background-image: none !important;
  background-color: var(--ou-cream, #F4F0EB) !important;
}
.hero > .overlay-bottom {
  display: none !important;
}

/* ------------------------------------------------------------------ */
/* Monogram container — sits in the empty right column of             */
/* .hero-grid.main on desktop.                                        */
/* ------------------------------------------------------------------ */
#ou-hero3d {
  position: relative;
  width: min(46vw, 520px);
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  justify-self: center;
  align-self: center;
  pointer-events: none;
}

/* Entrance: rise + settle, runs once (class added by hero3d.js). */
#ou-hero3d.ou3d-in {
  animation: ou3d-rise 600ms cubic-bezier(0.22, 0.9, 0.3, 1.06) both;
}
@keyframes ou3d-rise {
  from { opacity: 0; transform: translateY(46px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0); }
}

.ou3d-stage {
  position: absolute;
  inset: 0;
  perspective: 1100px;
  animation: ou3d-bob 6s ease-in-out infinite;
}
@keyframes ou3d-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.ou3d-stack {
  position: absolute;
  inset: 6% 6% 14%;
  transform-style: preserve-3d;
  will-change: transform;
  animation: ou3d-spin 12s linear infinite;
}
/* Continuous 360deg spin. The keyframes sprint through the thin edge-on
   angles (90deg / 270deg) and linger face-on, so the mark always reads. */
@keyframes ou3d-spin {
  0%   { transform: rotateY(0deg); }
  27%  { transform: rotateY(60deg); }
  32%  { transform: rotateY(120deg); }
  68%  { transform: rotateY(240deg); }
  73%  { transform: rotateY(300deg); }
  100% { transform: rotateY(360deg); }
}
.ou3d-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-drag: none;
  /* MUST stay visible: with hidden backfaces the whole mark vanishes for
     the back half of every 360deg revolution. The mirrored back view is
     fine for an abstract mark. */
  backface-visibility: visible !important;
}

/* Tilt frame (created by hero3d.js): constant downward tilt so the layer
   fan stays visible even edge-on; JS nudges it toward the cursor. */
.ou3d-tilt {
  position: absolute;
  inset: 0;
  transform: rotateX(-12deg);
  transform-style: preserve-3d;
  will-change: transform;
}

/* Specular sweep on the front face — a faint warm-light gradient masked to the
   mark's silhouette. hero3d.js updates --ou3d-sheen-x each frame so the sheen
   drifts across the face as the mark tilts. */
.ou3d-sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    rgba(251, 249, 245, 0) 42%,
    rgba(251, 249, 245, 0.16) 50%,
    rgba(251, 249, 245, 0) 58%
  );
  background-size: 260% 100%;
  animation: ou3d-sheen 12s linear infinite;
  -webkit-mask-image: url("../brand/ou-mark.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url("../brand/ou-mark.svg");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
@keyframes ou3d-sheen {
  0%   { background-position: 20% 0; }
  50%  { background-position: 80% 0; }
  100% { background-position: 20% 0; }
}

/* Soft elliptical ground shadow; hero3d.js shifts/scales it opposite the tilt. */
.ou3d-shadow {
  position: absolute;
  left: 50%;
  bottom: -1%;
  width: 70%;
  height: 11%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(11, 11, 11, 0.26), rgba(11, 11, 11, 0) 68%);
  filter: blur(2px);
  will-change: transform;
  animation: ou3d-shadow 12s linear infinite;
}
@keyframes ou3d-shadow {
  0%, 27%, 32%, 68%, 73%, 100% { transform: translateX(-50%) scaleX(1); }
  29.5%, 70.5%                 { transform: translateX(-50%) scaleX(0.55); }
}

/* Swapped-in brand marks replacing the old blue glass renders. */
.ou-mark-swap {
  padding: 6% 10%;
}

/* ------------------------------------------------------------------ */
/* Mobile / tablet: Webflow flips .hero-grid to column-REVERSE at      */
/* 991px, which would put the monogram above the headline. Re-flip so  */
/* it sits below the headline instead, and shrink it.                  */
/* ------------------------------------------------------------------ */
@media screen and (max-width: 991px) {
  .hero-grid.main {
    flex-direction: column;
  }
  #ou-hero3d {
    width: min(64vw, 340px);
    margin-top: 28px;
  }
}

/* Reduced motion: static mark, fully visible, no animation. */
@media (prefers-reduced-motion: reduce) {
  #ou-hero3d,
  #ou-hero3d.ou3d-in,
  .ou3d-stage,
  .ou3d-stack,
  .ou3d-sheen,
  .ou3d-shadow {
    animation: none !important;
  }
  #ou-hero3d { opacity: 1; transform: none; }
  .ou3d-tilt { transform: none; }
}