/* ==========================================================================
   Auren — live product demos rendered inside the CSS phone frame.
   Purely decorative: every demo is aria-hidden and the page reads fine
   without it. All loops pause under prefers-reduced-motion.
   ========================================================================== */

/* ------------------------------------------------- 1. ALARM — ringing screen
   Mirrors the app's real ringing screen: warm amber field, monospaced clock,
   the sunrise ramp climbing over 15s, and a chase-chain countdown.          */

.d-alarm {
  background: linear-gradient(176deg, #F0B173 0%, #E08A3C 100%);
  color: #17120C;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8%;
  position: relative;
}
.d-alarm .ramp {
  position: absolute; inset: 0;
  background: #FFFDF7;
  opacity: 0;
  animation: ramp 15s cubic-bezier(.4, 0, .7, 1) infinite;
  pointer-events: none;
}
@keyframes ramp {
  0%, 8%   { opacity: 0; }
  62%      { opacity: .52; }
  86%, 100%{ opacity: 0; }
}
.d-alarm .inner { position: relative; z-index: 2; width: 100%; }
.d-alarm .clock {
  font-family: var(--mono);
  font-size: 3.1em; font-weight: 700; letter-spacing: -.04em;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.d-alarm .task { margin-top: .85em; font-size: .95em; font-weight: 550; opacity: .82; }
.d-alarm .go {
  margin-top: 2.1em; background: #17120C; color: #FBF6EC;
  border-radius: 12px; padding: .82em 1em; font-weight: 650; font-size: .95em;
}
.d-alarm .chain {
  display: flex; gap: .42em; justify-content: center; margin-top: 1.5em;
}
.d-alarm .chain i {
  width: .42em; height: .42em; border-radius: 99px;
  background: #17120C; opacity: .2;
  animation: chain 5s linear infinite;
}
.d-alarm .chain i:nth-child(1) { animation-delay: 0s; }
.d-alarm .chain i:nth-child(2) { animation-delay: .7s; }
.d-alarm .chain i:nth-child(3) { animation-delay: 1.4s; }
.d-alarm .chain i:nth-child(4) { animation-delay: 2.1s; }
.d-alarm .chain i:nth-child(5) { animation-delay: 2.8s; }
.d-alarm .chain i:nth-child(6) { animation-delay: 3.5s; }
.d-alarm .chain i:nth-child(7) { animation-delay: 4.2s; }
@keyframes chain { 0%, 60% { opacity: .2; } 8%, 40% { opacity: .95; } }

/* ------------------------------------------- 2. INTERVIEW — live call screen */
.d-call {
  background: #0D0D12; color: #ECECF2;
  padding: 7%; gap: 5%;
  align-items: center;
}
.d-call .pill {
  margin-top: 9%;
  display: inline-flex; align-items: center; gap: .55em;
  border: 1px solid rgba(196, 92, 232, .45);
  border-radius: 999px; padding: .5em 1em;
  font-size: .82em; color: #E4A8F5; font-weight: 550;
  font-variant-numeric: tabular-nums;
}
.d-call .orb {
  width: 34%; aspect-ratio: 1; border-radius: 50%; margin: 6% 0 2%;
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(200, 80, 240, .55) 0%, transparent 68%);
  animation: orb 2.6s ease-in-out infinite;
}
@keyframes orb { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.11); } }

.d-call .wave { display: flex; align-items: center; gap: .18em; height: 1.9em; }
.d-call .wave i {
  width: .2em; border-radius: 99px; background: #F0A6FF;
  animation: wave 1s ease-in-out infinite;
}
.d-call .wave i:nth-child(1) { height: 40%; animation-delay: 0s; }
.d-call .wave i:nth-child(2) { height: 75%; animation-delay: .13s; }
.d-call .wave i:nth-child(3) { height: 100%; animation-delay: .26s; }
.d-call .wave i:nth-child(4) { height: 62%; animation-delay: .39s; }
.d-call .wave i:nth-child(5) { height: 34%; animation-delay: .52s; }
@keyframes wave { 0%, 100% { transform: scaleY(.42); } 50% { transform: scaleY(1); } }

.d-call .bubble {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px; padding: .95em 1.05em;
  font-size: .87em; line-height: 1.5; width: 100%;
  min-height: 7.4em;
}
.d-call .bubble .k { color: #4FC8E8; }
.d-call .caret {
  display: inline-block; width: .5em; height: 1em; vertical-align: -.16em;
  background: #4FC8E8; animation: blink 1s steps(2) infinite; margin-left: .1em;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.d-call .end {
  margin-top: auto; margin-bottom: 8%;
  background: #E5484D; color: #fff; border-radius: 999px;
  padding: .82em 2em; font-weight: 650; font-size: .95em;
}

/* --------------------------------------------- 3. PUZZLE — pattern question */
.d-puz { background: #FBFAF6; color: #15241D; padding: 7%; gap: 4%; }
.d-puz .top { display: flex; align-items: center; gap: .7em; margin-top: 8%; }
.d-puz .bar { flex: 1; height: .42em; border-radius: 99px; background: #E4E1D6; overflow: hidden; }
.d-puz .bar i { display: block; height: 100%; border-radius: 99px; background: #1F7A5A; width: 30%; animation: fill 6s ease-in-out infinite; }
@keyframes fill { 0%, 10% { width: 26%; } 55%, 100% { width: 72%; } }
.d-puz .score { font-weight: 700; color: #C2700F; font-variant-numeric: tabular-nums; font-size: .95em; }

.d-puz .q { font-size: 1.32em; font-weight: 700; text-align: center; margin: .7em 0 .1em; letter-spacing: -.02em; }

.d-puz .seq { display: flex; gap: .5em; justify-content: center; margin: .3em 0 .2em; }
.d-puz .seq b {
  position: relative;
  width: 2.5em; height: 2.5em; border-radius: .6em; background: #D8EFE4;
  box-shadow: 0 .16em 0 0 #BCDCCE;
  display: grid; place-items: center;
}
.d-puz .seq b:last-child { background: #EDEAE0; box-shadow: 0 .16em 0 0 #D8D4C6; color: #9A968A; font-size: 1.15em; }
.d-puz .dot { position: absolute; width: .42em; height: .42em; border-radius: 99px; background: #1F7A5A; }

.d-puz .opts { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; margin-top: auto; margin-bottom: 8%; }
.d-puz .opt {
  background: #fff; border-radius: .75em; box-shadow: 0 .18em 0 0 #E1DDD0;
  aspect-ratio: 1.55; display: grid; place-items: center;
  animation: optpick 6s ease-in-out infinite;
}
.d-puz .opt:nth-child(3) { animation-name: optwin; }
@keyframes optpick { 0%, 100% { transform: none; } }
@keyframes optwin {
  0%, 62% { transform: none; box-shadow: 0 .18em 0 0 #E1DDD0; }
  70%     { transform: translateY(.18em); box-shadow: 0 0 0 0 #E1DDD0; }
  80%, 100% { transform: none; box-shadow: 0 .18em 0 0 #1F7A5A; }
}
.d-puz .sh { width: 1.5em; height: 1.5em; }
.d-puz .sh.tri { width: 0; height: 0; border-left: .78em solid transparent; border-right: .78em solid transparent; border-bottom: 1.35em solid #16664C; }
.d-puz .sh.cir { border-radius: 50%; background: #7A5BE0; }
.d-puz .sh.sq  { background: #E0913F; border-radius: .12em; }
.d-puz .sh.dia { background: #3F8BE0; transform: rotate(45deg); border-radius: .12em; }

/* --------------------------------------------------------- shared pieces */
.d-status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: .75em 1.35em .2em; font-size: .78em; font-weight: 600;
  font-variant-numeric: tabular-nums; pointer-events: none;
}
.d-status .bars { display: flex; gap: .16em; align-items: flex-end; height: .72em; }
.d-status .bars i { width: .2em; border-radius: 1px; background: currentColor; }
.d-status .bars i:nth-child(1) { height: 36%; }
.d-status .bars i:nth-child(2) { height: 58%; }
.d-status .bars i:nth-child(3) { height: 80%; }
.d-status .bars i:nth-child(4) { height: 100%; }
.d-status .batt { width: 1.5em; height: .78em; border-radius: .18em; border: .1em solid currentColor; position: relative; opacity: .95; }
.d-status .batt::after { content: ''; position: absolute; inset: .12em; background: currentColor; border-radius: .06em; right: 35%; }

@media (prefers-reduced-motion: reduce) {
  .d-alarm .ramp, .d-alarm .chain i, .d-call .orb, .d-call .wave i,
  .d-call .caret, .d-puz .bar i, .d-puz .opt { animation: none !important; }
  .d-alarm .ramp { opacity: .18; }
  .d-puz .opt:nth-child(3) { box-shadow: 0 .18em 0 0 #1F7A5A; }
}