/* ============================================================
   SANO | Hero UI — CSS panel
   ============================================================ */

.sano-hui {
  container-type: inline-size;
  container-name: sano-hui;

  /* ---- MOTION TOKENS — shared across every Sano module ---- */
  --ease-soft:  cubic-bezier(0.33, 1, 0.68, 1);
  --ease-pulse: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-reveal: 1000ms;

  /* Continues the hero load cascade: trust signals land at 440ms */
  --hui-in: 600ms;
  --hui-badge-in: 900ms;
  /* The float waits for the heading highlight sequence to finish */
  --hui-float-start: 2000ms;

  /* ---- TYPOGRAPHY — replace "inherit" with the theme font ---- */
  --hui-font: inherit;

  /* ---- FALLBACKS ---- */
  --hui-badge-bg: #FDEDE8;
  --hui-badge-accent: #F4511E;
  --hui-badge-title: #0B1B2B;
  --hui-badge-label: #5A6472;
  --hui-icon: 38px;                /* the accent square */
  --hui-icon-img: 20px;            /* the artwork inside it */

  padding: 0;
  font-family: var(--hui-font);
}

.sano-hui__inner {
  position: relative;              /* anchor for the badge layer */
  max-width: var(--hui-max, 1140px);
  margin-inline: auto;
}

/* ---- FRAME ------------------------------------------------
   The card runs off the bottom of the section: top corners are
   rounded, the bottom edge is a clean cut with no shadow under it.

   clip-path does that cut. Negative insets push the clip region
   outwards on three sides so the shadow can spread, while the 0
   at the bottom trims it flush with the image edge. The other
   way round this — overflow:hidden with negative margins — makes
   the box wider than the viewport and causes horizontal scroll.

   Four shadow layers, not one. A single large blur reads as a
   grey halo. Low offsets and wide blur, because a shadow pushed
   downwards would land in the part that gets clipped away.
----------------------------------------------------------- */
.sano-hui__frame {
  border-radius: var(--hui-radius, 16px) var(--hui-radius, 16px) 0 0;
  overflow: hidden;                /* rounds the image corners */
  clip-path: inset(-240px -240px 0 -240px);
  box-shadow:
    0 2px 6px rgba(11, 27, 43, .04),
    0 10px 24px rgba(11, 27, 43, .05),
    0 24px 60px 4px rgba(11, 27, 43, .06),
    0 40px 120px 24px rgba(11, 27, 43, .07);
  animation: sanoHuiIn var(--dur-reveal) var(--ease-soft) var(--hui-in) backwards;
}

.sano-hui__img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- BADGE LAYER ------------------------------------------
   Two nested elements on purpose: the outer one runs the
   entrance, the inner one runs the endless float. One element
   cannot hold two transform animations at once.
----------------------------------------------------------- */
.sano-hui__badge {
  position: absolute;
  top: var(--hui-badge-top, 70%);
  right: var(--hui-badge-right, -6%);
  z-index: 2;
  animation: sanoHuiIn var(--dur-reveal) var(--ease-soft) var(--hui-badge-in) backwards;
}

.sano-hui__badge-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px 14px 14px;
  border-radius: 14px;
  background: var(--hui-badge-bg);
  animation: sanoHuiFloat 6s var(--ease-pulse) var(--hui-float-start) infinite;
}

.sano-hui__badge-img {
  display: block;
  width: 100%;
  height: auto;
}

/* This square paints whether or not the image inside it loads.
   If it is missing from the page entirely, the HubL never
   rendered the span and the problem is the field, not the CSS. */
.sano-hui__badge-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--hui-icon, 38px);
  height: var(--hui-icon, 38px);
  border-radius: 10px;
  background: var(--hui-badge-accent);
}

.sano-hui__badge-icon img {
  display: block;
  width: var(--hui-icon-img, 20px);
  height: var(--hui-icon-img, 20px);
  object-fit: contain;
}

.sano-hui__badge-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* The badge is an ornament sitting on top of the image, not body
   copy. It has to shrink with the frame or it would swallow the
   screenshot on a phone — this is the one place a clamp belongs. */
.sano-hui__badge-title {
  color: var(--hui-badge-title);
  font-size: clamp(15px, 1.5cqi, 18px);
  font-weight: 700;
  line-height: 1.2;
}

.sano-hui__badge-label {
  color: var(--hui-badge-label);
  font-size: clamp(13px, 1.3cqi, 15px);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* ---- ANIMATION --------------------------------------------
   "backwards" holds the start frame during the delay and then
   frees the element. "both" would pin the final frame forever
   and the float could never take over.
----------------------------------------------------------- */
@keyframes sanoHuiIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* 8px over 6 seconds. Any faster and it stops reading as
   "alive" and starts reading as "moving". */
@keyframes sanoHuiFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@media (prefers-reduced-motion: reduce) {
  .sano-hui__frame,
  .sano-hui__badge,
  .sano-hui__badge-inner { animation: none; }
}

/* ---- Fallback for browsers without container queries ------ */
@supports not (container-type: inline-size) {
  @media (max-width: 768px) {
    .sano-hui__badge { display: none; }
  }
}