/* Anan Meet Ana scene — night band, rising lantern questions, staged demo,
   particle portrait. Root: .anan-meetana (inside the dark Elementor band). */

.anan-meetana { position: relative; }

/* The sky is 100vw, and on Windows 100vw includes the vertical scrollbar —
   the overhang creates a page-wide horizontal scrollbar. Clip the body
   (NOT overflow:hidden — that creates a scroll container and would break
   the homepage's position:sticky scroll stack; clip does not). This module
   only loads on the two Meet Ana pages, so the rule is scoped to them. */
body { overflow-x: clip; }

/* Full-bleed sky layer that carries the lanterns. Clipped to itself so the
   glow never spills onto neighbouring sections. */
.anan-meetana__sky {
  position: absolute; top: -170px; bottom: -120px; left: 50%;
  width: 100vw; transform: translateX(-50%);
  overflow: hidden; pointer-events: none; z-index: 0;
}
/* When the JS re-parents the sky onto the band section itself, it spans the
   band exactly - messages reach the true top instead of a clip line partway
   down. */
.anan-meetana__sky--band { top: 0; bottom: 0; z-index: 1; }

/* Deliberately dim: the sky is ambience, not content — the chat card and the
   intro line carry the scene. Peak opacity comes from --o (set per depth in
   JS); hover restores full presence since the bubbles are clickable. */
.anan-lantern {
  position: absolute; top: var(--resty, 40%); max-width: 250px;
  padding: 9px 15px; border-radius: 14px;
  background: rgba(210, 193, 150, .06);
  border: 1px solid rgba(210, 193, 150, .20);
  color: #E9E2D2; font: 400 13px/1.45 Montserrat, sans-serif;
  box-shadow: 0 0 18px rgba(210, 193, 150, .09), inset 0 0 12px rgba(210, 193, 150, .05);
  cursor: pointer; pointer-events: auto;
  opacity: 0; z-index: var(--z, 1);
  transform: scale(.18);
  animation: anan-lantern-approach var(--dur, 14s) linear var(--delay, 0s) infinite;
  will-change: transform, opacity;
}
.anan-lantern:hover { background: rgba(210, 193, 150, .2); border-color: rgba(210, 193, 150, .6); }
.anan-lantern::after {
  content: ""; position: absolute; left: 50%; bottom: -7px;
  width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: rgba(210, 193, 150, .8); box-shadow: 0 0 8px 2px rgba(210, 193, 150, .4);
}
.anan-lantern__sway { display: block; animation: anan-lantern-sway var(--sway, 7s) ease-in-out infinite alternate; }
/* Born deep in the night, accelerating toward the viewer, gone just before
   arrival. Scale steps grow faster each segment = perspective approach. */
@keyframes anan-lantern-approach {
  0%   { transform: translateY(30px) scale(.18); opacity: 0; }
  15%  { opacity: calc(var(--o, .8) * .65); }
  45%  { transform: translateY(8px) scale(calc(var(--smax, 2) * .34)); opacity: var(--o, .8); }
  82%  { transform: translateY(-20px) scale(calc(var(--smax, 2) * .68)); opacity: var(--o, .8); }
  100% { transform: translateY(-56px) scale(var(--smax, 2)); opacity: 0; }
}
@keyframes anan-lantern-sway { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
.anan-lantern--far { filter: blur(1px); }
@media (prefers-reduced-motion: reduce) {
  .anan-lantern { animation: none; opacity: .28; transform: scale(1); }
  .anan-lantern__sway { animation: none; }
}

/* ---- Typing intro bubble (the heading) ---- */
.anan-intro-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
/* A fixed-width chat bubble on Ana's own message surface (same #F1EDE3 as
   her answers in the demo card). The bubble itself never moves — it is a
   static clipping frame (overflow hidden). The inner .anan-intro-line does
   the chat motion: finished text slides up out of the bubble (.is-leaving),
   the next line settles in from below (.is-entering is removed with
   transitions re-enabled, which plays the entry) and types. */
.anan-intro {
  display: inline-block; width: min(27em, 94vw); box-sizing: border-box;
  min-height: 1.5em; overflow: hidden;
  /* single line, always: wide enough for the longest localized line, and the
     font tracks the viewport below desktop so nothing ever wraps — a wrap
     would change the bubble height and make the section jump */
  white-space: nowrap;
  font-size: min(1em, 3.4vw);
  position: relative; z-index: 3; /* above the lantern sky */
  padding: .3em .55em .34em; border-radius: .4em .4em .4em .1em;
  background: #F1EDE3; color: #2b2b28;
  box-shadow: 0 12px 38px rgba(0, 0, 0, .35);
  text-align: left; line-height: 1.3;
}
.anan-intro-line {
  display: block;
  transition: transform .45s ease, opacity .45s ease;
}
.anan-intro-line.is-leaving { transform: translateY(-115%); opacity: 0; }
.anan-intro-line.is-entering { transform: translateY(12px); opacity: 0; }
.anan-intro-line::after {
  content: ""; display: inline-block; width: 3px; height: 1em;
  margin-left: .12em; vertical-align: -.12em;
  background: #958359;
  animation: anan-caret 1s steps(1) infinite;
}
@keyframes anan-caret { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .anan-intro-line::after { animation: none; } }

/* ---- Layout ---- */
.anan-meetana__inner {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 54px;
  align-items: center; justify-content: center;
  max-width: 1180px; margin: 0 auto;
}
.anan-meetana__demo { flex: 1 1 480px; max-width: 620px; min-width: 300px; }
.anan-meetana__side { flex: 1 1 340px; max-width: 430px; min-width: 290px; text-align: center; }

/* ---- The staged conversation card ---- */
.anan-meetana__card {
  background: #FFFFFF; border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .38);
}
.anan-meetana__cardhead {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  background: linear-gradient(135deg, #958359, #b9a26e);
  color: #fff; font: 600 15px/1 Montserrat, sans-serif;
}
.anan-meetana__cardavatar {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(255, 255, 255, .22);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600;
}
.anan-meetana__cardlive {
  margin-left: auto; display: flex; align-items: center; gap: 5px;
  font: 500 11px/1 Montserrat, sans-serif; letter-spacing: .5px;
  text-transform: uppercase; opacity: .92;
}
.anan-meetana__cardlive::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #8fd694; box-shadow: 0 0 6px #8fd694;
}
.anan-meetana__cardlog {
  height: 342px; padding: 18px; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px;
  transition: opacity .5s ease;
}
.anan-meetana__cardlog.is-fading { opacity: 0; }
.anan-mm {
  max-width: 84%; padding: 9px 13px; border-radius: 12px;
  font: 400 13.5px/1.5 Montserrat, sans-serif;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  flex: 0 0 auto;
}
.anan-mm--q { align-self: flex-end; background: #6e6247; color: #fff; border-bottom-right-radius: 4px; }
.anan-mm--a { align-self: flex-start; background: #F1EDE3; color: #2b2b28; border-bottom-left-radius: 4px; }
.anan-mm--note { align-self: center; background: none; box-shadow: none; color: #9b9484; font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; padding: 2px 0; }
.anan-mm--dots { display: inline-flex; gap: 4px; align-items: center; min-height: 18px; }
.anan-mm--dots i {
  width: 7px; height: 7px; border-radius: 50%; background: #b0a893;
  animation: anan-mm-blink 1.1s infinite;
}
.anan-mm--dots i:nth-child(2) { animation-delay: .18s; }
.anan-mm--dots i:nth-child(3) { animation-delay: .36s; }
@keyframes anan-mm-blink { 0%, 80%, 100% { transform: scale(.6); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

.anan-minicard {
  align-self: flex-start; display: flex; gap: 0; overflow: hidden;
  width: 84%; max-width: 330px; border-radius: 12px;
  background: #fff; border: 1px solid #e4ddcd;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .10);
  animation: anan-minicard-pop .35s ease;
  flex: 0 0 auto;
}
@keyframes anan-minicard-pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.anan-minicard__thumb {
  flex: 0 0 92px; min-height: 72px;
  background: linear-gradient(145deg, #2e5f6b 0%, #5b93a0 45%, #D2C196 100%);
  position: relative;
}
.anan-minicard__thumb::after {
  content: "\221E"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .65); font-size: 22px; font-weight: 600;
}
.anan-minicard__body { padding: 10px 13px; display: flex; flex-direction: column; gap: 3px; }
.anan-minicard__body strong { font: 600 13px/1.35 Montserrat, sans-serif; color: #252A2C; }
.anan-minicard__body span { font: 400 12px/1.4 Montserrat, sans-serif; color: #6E6659; }

/* ---- "Your turn" input ---- */
.anan-meetana__try { display: flex; gap: 10px; margin-top: 20px; position: relative; }
/* Big outlined curved arrow (user's mockup scale) pointing at the input.
   Injected by JS as inline SVG — a CSS background can't animate its strokes.
   The bright dash running along the outline is the same 'spark on the rim'
   idea as the input's conic sweep, and shares its 3.4s period. */
.anan-meetana__arrow {
  position: absolute; left: -230px; top: -118px;
  width: 196px; height: 155px; pointer-events: none;
  display: none;
  animation: anan-arrow-bob 2.4s ease-in-out infinite alternate;
}
@media (min-width: 1100px) { .anan-meetana__arrow { display: block; } }
@keyframes anan-arrow-bob { from { transform: translate(0, 0); } to { transform: translate(6px, 8px); } }
.anan-meetana__arrow path {
  fill: none; stroke: rgba(210, 193, 150, .5); stroke-width: 2.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.anan-meetana__arrow .anan-meetana__arrow-spark {
  stroke: #EDE6D6; stroke-width: 3;
  stroke-dasharray: 10 90; stroke-dashoffset: 0;
  filter: drop-shadow(0 0 5px rgba(237, 230, 214, .9));
  animation: anan-arrow-spark 3.4s linear infinite;
}
@keyframes anan-arrow-spark { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) {
  .anan-meetana__arrow { animation: none; }
  .anan-meetana__arrow .anan-meetana__arrow-spark { animation: none; }
}
/* Opaque input with a spark orbiting the rim: the padding-box layer is the
   solid fill, the border-box conic layer paints the ring, and @property lets
   the sweep angle animate. Browsers without @property keep a static ring. */
@property --anan-sweep {
  syntax: '<angle>'; initial-value: 0deg; inherits: false;
}
.anan-meetana__tryinput {
  flex: 1 1 auto; min-width: 0; height: 62px; padding: 0 20px;
  border-radius: 10px; border: 1px solid transparent;
  background:
    linear-gradient(#303638, #303638) padding-box,
    conic-gradient(from var(--anan-sweep),
      rgba(210, 193, 150, .38) 0deg 296deg,
      rgba(237, 230, 214, 1) 326deg,
      rgba(210, 193, 150, .38) 356deg 360deg) border-box;
  color: #F4F1EA;
  font: 400 16.5px/1.4 Montserrat, sans-serif;
  animation: anan-sweep 3.4s linear infinite;
}
@keyframes anan-sweep { to { --anan-sweep: 360deg; } }
.anan-meetana__tryinput::placeholder { color: rgba(233, 226, 210, .55); }
.anan-meetana__tryinput:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(210, 193, 150, .18);
  background:
    linear-gradient(#343a3c, #343a3c) padding-box,
    conic-gradient(from var(--anan-sweep),
      rgba(210, 193, 150, .7) 0deg 296deg,
      #EDE6D6 326deg,
      rgba(210, 193, 150, .7) 356deg 360deg) border-box;
}
@media (prefers-reduced-motion: reduce) {
  .anan-meetana__tryinput { animation: none; }
}
.anan-meetana__trycta {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 24px; border: 0; border-radius: 10px; cursor: pointer;
  background: linear-gradient(135deg, #958359, #b9a26e); color: #fff;
  font: 600 15px/1 Montserrat, sans-serif;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  transition: filter .15s ease, transform .15s ease;
}
.anan-meetana__trycta:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* ---- Portrait side ---- */
/* Portrait canvas retired (JS also removes the node); video will replace it. */
.anan-meetana__canvas { display: none; }
.anan-meetana__lead {
  margin: 0 0 18px; font: 300 15.5px/1.75 Montserrat, sans-serif; color: #D9D4C8;
}
.anan-meetana__more {
  display: inline-flex; align-items: center; gap: 8px;
  font: 600 14px/1 Montserrat, sans-serif; letter-spacing: .3px;
  color: #D2C196; text-decoration: none;
  border: 1px solid rgba(210, 193, 150, .45); border-radius: 999px;
  padding: 13px 26px;
  transition: background .2s ease, color .2s ease;
}
.anan-meetana__more:hover { background: #D2C196; color: #252A2C; }

/* ---- Standalone page extras ---- */
.anan-meetana--page .anan-meetana__cardlog { height: 380px; }
.anan-macaps {
  display: flex; flex-wrap: wrap; gap: 26px; justify-content: center;
  max-width: 1180px; margin: 0 auto;
}
.anan-macaps__item {
  flex: 1 1 230px; max-width: 270px; min-width: 210px;
  background: #FFFFFF; border: 1px solid #E7E2D6; border-radius: 14px;
  padding: 26px 24px;
  box-shadow: 0 6px 24px rgba(37, 42, 44, .06);
}
.anan-macaps__item strong {
  display: block; margin-bottom: 8px;
  font: 600 16px/1.3 Montserrat, sans-serif; color: #252A2C;
}
.anan-macaps__item strong::before {
  content: "\221E"; display: block; margin-bottom: 12px;
  color: #D2C196; font-size: 22px;
}
.anan-macaps__item span { font: 300 14px/1.65 Montserrat, sans-serif; color: #55524a; }

@media (max-width: 767px) {
  .anan-meetana__inner { gap: 40px; }
  .anan-meetana__cardlog { height: 300px; }
  .anan-meetana__try { flex-direction: column; }
  .anan-meetana__trycta { justify-content: center; min-height: 50px; }
  .anan-meetana__side { text-align: center; }
}