/* ===== Attenir H5 — Shared Styles ===== */

/* Subset fonts — only ~300 chars actually used */
@font-face {
  font-family: 'Noto Serif SC';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('fonts/NotoSerifSC-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Noto Serif SC';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('fonts/NotoSerifSC-700.woff2') format('woff2');
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --claris-red: #A50519;
  --claris-red-dark: #7a0412;
  --gold-warm: #E8C878;
  --gold-bright: #FFE4A8;
  --gold-deep: #C8964A;
  --white: #FFFFFF;
  --white-95: rgba(255, 255, 255, 0.95);
  --white-80: rgba(255, 255, 255, 0.80);
  --white-60: rgba(255, 255, 255, 0.60);
  --white-40: rgba(255, 255, 255, 0.40);
}

html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'PingFang SC', 'Microsoft YaHei', serif;
  background: #1a0508;
}

.page {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ===== Background Layers ===== */
.bg-photo {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.bg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}

.bg-vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 70% 45% at 50% 52%, transparent 0%, rgba(60, 3, 10, 0.18) 55%, rgba(30, 1, 5, 0.50) 100%);
}

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 55% 35% at 50% 52%, rgba(255, 200, 100, 0.18) 0%, transparent 70%),
    radial-gradient(ellipse 35% 25% at 50% 50%, rgba(255, 180, 80, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse 75% 50% at 50% 48%, rgba(255, 220, 140, 0.06) 0%, transparent 80%);
  mix-blend-mode: screen;
}

.bg-rays {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  opacity: 0.30;
  mix-blend-mode: soft-light;
  /* Static rays — no animation for better mobile performance */
  background: conic-gradient(
    from 0deg at 50% 35%,
    transparent 0deg, rgba(255,210,140,0.14) 8deg, transparent 16deg,
    transparent 65deg, rgba(255,220,150,0.10) 72deg, transparent 80deg,
    transparent 140deg, rgba(255,210,130,0.11) 148deg, transparent 156deg,
    transparent 220deg, rgba(255,215,140,0.10) 227deg, transparent 235deg,
    transparent 305deg, rgba(255,210,130,0.11) 312deg, transparent 320deg,
    transparent 360deg
  );
}

.bg-top-fade {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: linear-gradient(180deg,
    rgba(100, 8, 18, 0.50) 0%,
    rgba(80, 5, 12, 0.20) 25%,
    transparent 45%,
    transparent 65%,
    rgba(50, 3, 8, 0.25) 82%,
    rgba(25, 1, 4, 0.65) 100%
  );
}

/* Heavier overlay for form pages */
.bg-top-fade--heavy {
  background: linear-gradient(180deg,
    rgba(60, 4, 10, 0.25) 0%,
    rgba(50, 3, 8, 0.10) 30%,
    rgba(40, 3, 8, 0.06) 50%,
    rgba(40, 3, 8, 0.08) 70%,
    rgba(25, 1, 4, 0.30) 100%
  );
}

/* ===== Content z-index ===== */
.content {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* ===== Top Bar ===== */
.top-bar {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  padding-top: max(16px, env(safe-area-inset-top, 16px));
}

.top-bar .back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  text-decoration: none;
  font-size: 20px;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.top-bar .back-btn:active { opacity: 1; }

.top-bar .page-title {
  flex: 1;
  text-align: center;
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--white);
  letter-spacing: 4px;
  margin-right: 36px; /* compensate back button */
}

/* ===== Particles ===== */
.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  animation: float-up linear infinite;
  will-change: transform, opacity;
}

.particle--gold {
  background: radial-gradient(circle, rgba(255, 210, 140, 0.8) 0%, rgba(255, 200, 120, 0) 70%);
}

.particle--white {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 70%);
}

@keyframes float-up {
  0% { transform: translateY(0) scale(0); opacity: 0; }
  8% { opacity: 1; transform: translateY(-8vh) scale(1); }
  85% { opacity: 0.8; }
  100% { transform: translateY(-105vh) scale(0.3); opacity: 0; }
}

/* ===== Entry Animation ===== */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===== Common Button Styles ===== */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  height: 48px;
  border: none;
  border-radius: 24px;
  cursor: pointer;
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 5px;
  color: var(--white);
  background: linear-gradient(135deg, var(--claris-red) 0%, #c41025 100%);
  box-shadow: 0 4px 20px rgba(165, 5, 25, 0.3);
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:active {
  transform: scale(0.97);
  box-shadow: 0 2px 10px rgba(165, 5, 25, 0.4);
}

.btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  height: 48px;
  border: 1px solid rgba(255, 215, 160, 0.35);
  border-radius: 24px;
  cursor: pointer;
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 5px;
  color: var(--white-80);
  background: rgba(80, 30, 15, 0.55);
  text-decoration: none;
  transition: transform 0.2s, background 0.2s;
}

.btn-outline:active {
  transform: scale(0.97);
  background: rgba(120, 50, 25, 0.45);
}

/* ===== Logo Header (shared across sub-pages) ===== */
.logo-bar {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 24px 0 16px;
  padding-top: max(24px, calc(env(safe-area-inset-top) + 8px));
}

.logo-bar .back {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--white);
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.logo-bar .back:active { opacity: 1; }

.logo-bar .logo-center {
  flex: 1;
  text-align: center;
  margin-right: 36px; /* compensate back button so logo is truly centered */
}

/* back-row no longer needed */
.logo-bar .back-row { display: contents; }

.logo-bar .logo-img {
  height: 42px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(255, 220, 170, 0.2)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
}

/* Keep text styles as fallback */
.logo-bar .logo-text {
  font-family: 'Noto Serif SC', 'Source Han Serif SC', serif;
  font-weight: 400;
  font-size: 26px;
  color: var(--white);
  letter-spacing: 6px;
  text-shadow: 0 0 18px rgba(255, 220, 170, 0.25), 0 1px 5px rgba(0, 0, 0, 0.3);
  font-variant-ligatures: no-common-ligatures;
  font-feature-settings: "liga" 0, "clig" 0;
  -webkit-font-feature-settings: "liga" 0, "clig" 0;
}

.logo-bar .logo-cn {
  font-family: 'Noto Serif SC', serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 8px;
  margin-top: 4px;
  padding-left: 8px;
}

/* ===== Responsive ===== */
@media (min-width: 500px) {
  .page {
    max-width: 430px;
    margin: 0 auto;
  }
}