/* =========================
   ГЛАВНАЯ СТРАНИЦА — LOTTI
   ========================= */

* { box-sizing: border-box; }
img { display: block; max-width: 100%; }

body.home-body {
    margin: 0;
    font-family: ui-rounded, "Nunito", -apple-system, BlinkMacSystemFont, system-ui,
                 "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--lotti-text-title, #613851);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

/* ── Header ───────────────────────────────────────────────────────────────── */

.home-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    padding: calc(env(safe-area-inset-top) + 14px) 20px 14px;
    pointer-events: none;
}
.home-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    text-decoration: none;
}
.home-logo__icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(97,56,81,0.18);
}
.home-logo__name {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--lotti-text-title, #613851);
    line-height: 1;
    /* Subtle text shadow so it reads on any gradient bg */
    text-shadow: 0 1px 3px rgba(255,255,255,0.6);
}

/* ── Onboarding block ─────────────────────────────────────────────────────── */

.onboard {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 420px;
}

/* Animated background gradient */
.onboard-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #FFEDEB, #EFE0F7);
    transition: background 0.55s ease;
    z-index: 0;
}

/* Floating bubbles */
.onboard-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
/* iOS BubbleBackgroundView: 7 bubbles, glass-like (stroke + fill 18% + white highlight) */
.bubble {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: bubbleRise linear infinite;
    /* background and box-shadow set per slide by applyTheme() in home.js */
}
/* Sizes and positions match iOS configs (size, xFactor, duration, delay) */
.bubble-1 { width: 64px;  height: 64px;  left:  8%; bottom: -80px;  animation-duration: 6.0s; animation-delay:  0.0s; }
.bubble-2 { width: 34px;  height: 34px;  left: 82%; bottom: -50px;  animation-duration: 5.0s; animation-delay: -1.2s; }
.bubble-3 { width: 48px;  height: 48px;  left: 55%; bottom: -65px;  animation-duration: 7.0s; animation-delay: -0.4s; }
.bubble-4 { width: 24px;  height: 24px;  left: 30%; bottom: -40px;  animation-duration: 4.5s; animation-delay: -2.1s; }
.bubble-5 { width: 52px;  height: 52px;  left: 70%; bottom: -70px;  animation-duration: 5.5s; animation-delay: -0.9s; }
.bubble-6 { width: 28px;  height: 28px;  left: 18%; bottom: -45px;  animation-duration: 6.5s; animation-delay: -1.7s; }
.bubble-7 { width: 40px;  height: 40px;  left: 90%; bottom: -55px;  animation-duration: 4.8s; animation-delay: -0.6s; }

/* iOS: linear rise, easeOut fade-in (0→10%), easeIn fade-out (70→100%) */
@keyframes bubbleRise {
    0%   { transform: translateY(0);        opacity: 0; }
    8%   { opacity: 0.22; }
    70%  { opacity: 0.22; }
    100% { transform: translateY(-115vh);   opacity: 0; }
}

/* Slides container */
.onboard-slides {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
}

/* Individual slide — top padding clears the header (~72px) */
.onboard-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(env(safe-area-inset-top) + 72px) 32px 48px;
    visibility: hidden;
    pointer-events: none;
}
.onboard-slide.is-active {
    visibility: visible;
    pointer-events: auto;
}

/* Slide animations — match iOS spring(response:0.45, dampingFraction:0.75) */
.onboard-slide.anim-in-right  { animation: slideInRight .45s cubic-bezier(.34,1.04,.64,1) both; }
.onboard-slide.anim-in-left   { animation: slideInLeft  .45s cubic-bezier(.34,1.04,.64,1) both; }
.onboard-slide.anim-out-left  { animation: slideOutLeft .32s ease forwards; }
.onboard-slide.anim-out-right { animation: slideOutRight .32s ease forwards; }

@keyframes slideInRight  { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideInLeft   { from { transform: translateX(-60px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slideOutLeft  { to { transform: translateX(-60px); opacity: 0; } }
@keyframes slideOutRight { to { transform: translateX(60px);  opacity: 0; } }

/* Image area */
.slide-img-wrap {
    position: relative;
    width: min(260px, 60vw);
    height: min(260px, 60vw);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-bottom: 8px;
}

/* Glow behind image */
.slide-glow {
    position: absolute;
    width: 75%;
    height: 60%;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%) scale(0.3);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0s, transform 0s;
}
.onboard-slide.is-active .slide-glow {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    transition: opacity 0.5s ease 0.05s, transform 0.55s cubic-bezier(.34,1.56,.64,1) 0.05s;
}

/* Sparkles — iOS SparkleDecorView: spring appear then twinkle down */
.slide-sparkles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.sparkle {
    position: absolute;
    font-size: 14px;
    opacity: 0;
}

/* Sparkles must be above the image (slide-img has z-index:1) */
.slide-sparkles { z-index: 2; }

/* iOS positions (offset from image center, mapped to % in img-wrap) */
.sparkle:nth-child(1) { top:  6%; left: 20%; font-size: 18px; } /* delay 0.60s */
.sparkle:nth-child(2) { top: 10%; right: 12%; font-size: 13px; } /* delay 0.75s */
.sparkle:nth-child(3) { top: 30%; right:  6%; font-size: 16px; } /* delay 0.65s */
.sparkle:nth-child(4) { bottom: 20%; left: 10%; font-size: 12px; } /* delay 0.85s */

/* Phase 1: spring appear (scale 0.3→1 + spring overshoot) */
@keyframes sparkleAppear {
    0%   { opacity: 0;   transform: scale(0.3); }
    55%  { opacity: 1.0; transform: scale(1.18); }
    75%  { opacity: 1.0; transform: scale(0.93); }
    88%  { opacity: 1.0; transform: scale(1.04); }
    100% { opacity: 1.0; transform: scale(1.0);  }
}
/* Phase 2: twinkle — iOS easeInOut repeatForever, opacity 1.0→0.3, scale 1→0.55 */
@keyframes sparkleTwinkle {
    0%, 100% { opacity: 1.0; transform: scale(1.0);  }
    50%      { opacity: 0.3; transform: scale(0.55); }
}

/* Per-sparkle: appear (0.4s spring) then twinkle starts right after */
.onboard-slide.is-active .sparkle:nth-child(1) {
    animation: sparkleAppear 0.40s cubic-bezier(.34,1.5,.64,1) 0.60s both,
               sparkleTwinkle 1.50s ease-in-out 1.00s infinite;
}
.onboard-slide.is-active .sparkle:nth-child(2) {
    animation: sparkleAppear 0.40s cubic-bezier(.34,1.5,.64,1) 0.75s both,
               sparkleTwinkle 1.65s ease-in-out 1.15s infinite;
}
.onboard-slide.is-active .sparkle:nth-child(3) {
    animation: sparkleAppear 0.40s cubic-bezier(.34,1.5,.64,1) 0.65s both,
               sparkleTwinkle 1.80s ease-in-out 1.05s infinite;
}
.onboard-slide.is-active .sparkle:nth-child(4) {
    animation: sparkleAppear 0.40s cubic-bezier(.34,1.5,.64,1) 0.85s both,
               sparkleTwinkle 1.55s ease-in-out 1.25s infinite;
}

/* Main illustration */
.slide-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: scale(0.1);
    transition: opacity 0s, transform 0s;
}
.onboard-slide.is-active .slide-img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.35s ease 0.05s, transform 0.55s cubic-bezier(.34,1.56,.64,1) 0.05s;
}
/* iOS: bob (3.0s) and tilt (3.9s) are SEPARATE animations so they drift out of sync */
@keyframes imgBob {
    0%, 100% { translate: 0 4px;  }
    50%      { translate: 0 -8px; }
}
@keyframes imgTilt {
    0%, 100% { rotate: -3deg; }
    50%      { rotate:  3deg; }
}
.slide-img.is-bobbing {
    animation: imgBob 3.0s ease-in-out infinite, imgTilt 3.9s ease-in-out infinite;
}

/* Text block — iOS spring(response:0.5, dampingFraction:0.75), delay 0.3s, from y:30px */
.slide-text {
    text-align: center;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0s, transform 0s;
}
.onboard-slide.is-active .slide-text {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.4s ease 0.30s, transform 0.50s cubic-bezier(.34,1.06,.64,1) 0.30s;
}

.slide-title {
    font-size: clamp(20px, 5.5vw, 26px);
    font-weight: 700;
    color: var(--lotti-text-title, #613851);
    margin: 0 0 10px;
    line-height: 1.2;
}
.slide-subtitle {
    font-size: clamp(13px, 3.8vw, 15px);
    font-weight: 500;
    color: var(--lotti-text-sub, #947389);
    margin: 0;
    line-height: 1.6;
}

/* Dot indicators — iOS CutePageIndicator: inactive 10×10, active 28×10, spring(0.35, 0.65) */
.onboard-dots {
    position: absolute;
    bottom: 14px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    gap: 7px;
    z-index: 10;
}
.dot {
    width: 10px; height: 10px;
    border-radius: 5px;
    background: rgba(148,115,137,.25);
    border: none;
    padding: 0;
    cursor: pointer;
    /* spring(0.35,0.65): moderate overshoot, ~0.35s */
    transition: width .35s cubic-bezier(.34,1.2,.64,1), background .3s ease;
    -webkit-tap-highlight-color: transparent;
}
.dot.is-active {
    width: 28px;
}

/* ── Bottom CTA ──────────────────────────────────────────────────────────── */

.home-cta {
    background: var(--lotti-sheet-bg, #FAF7FC);
    padding: 14px 20px calc(8px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 -4px 20px rgba(97,56,81,.06);
}

/* Primary: download */
.home-download-btn {
    text-decoration: none;
    font-size: 17px;
}

/* Secondary: order online */
.btn-order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    border: 1.5px solid rgba(255,181,200,.40);
    border-radius: 28px;
    background: rgba(255,181,200,.07);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .1s ease;
}
.btn-order:active { transform: scale(0.97); background: rgba(255,181,200,.14); }

.btn-order__label {
    font-size: 15px;
    font-weight: 600;
    color: var(--lotti-text-title, #613851);
}
.btn-order__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--lotti-btn-from, #FF99B8);
    transition: opacity .3s ease;
}
.btn-order__price.is-loading { opacity: 0.5; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.home-footer {
    background: var(--lotti-sheet-bg, #FAF7FC);
    border-top: 1px solid rgba(148,115,137,.10);
    padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
}
.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}
.footer-contacts {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}
.footer-link {
    font-size: 14px;
    color: var(--lotti-text-sub, #947389);
    text-decoration: none;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
}
.footer-link:hover { opacity: .75; }
.footer-link--wa   { color: #25D366; font-weight: 600; }

.footer-legal {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.footer-link-sm {
    font-size: 12px;
    color: rgba(148,115,137,.55);
    text-decoration: none;
}
.footer-link-sm:hover { opacity: .75; }
.footer-sep { font-size: 12px; color: rgba(148,115,137,.25); }
.footer-copy {
    font-size: 11px;
    color: rgba(148,115,137,.35);
    margin: 0;
}