/* ==========================================================================
   "The ayah finds you" — living hero (experimental, preview-only until approved)
   Drifting golden light condenses into a verse card when a feeling is shared.
   Animates light, sky and ornament — never the words of the Quran themselves.
   ========================================================================== */

.hero-alive {
    /* Content-sized: the hero is as tall as what it says, plus
       breathing room — never an empty field of rented sky */
    display: flex;
    align-items: center;
    padding-top: clamp(110px, 16vh, 170px);
    padding-bottom: clamp(40px, 6vh, 72px);
    position: relative;
    overflow: hidden;
}
/* Tighten the seam between the hero and How It Works */
#how-it-works.section-pad { padding-top: clamp(44px, 6vw, 76px); }

/* Premium reveals: slower, softer, dreamier (overrides landing.css) */
.reveal {
    transform: translateY(20px);
    filter: blur(6px);
    transition-duration: 1.35s;
}
#hero-sky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.hero-alive .hero-wash { z-index: 0; }
.hero-stage { position: relative; z-index: 2; width: 100%; }

/* ---------- The invitation ---------- */

.hero-invite {
    text-align: center;
    transition: opacity 0.5s cubic-bezier(0.12, 0.23, 0.5, 1), filter 0.5s cubic-bezier(0.12, 0.23, 0.5, 1);
}
.hero-invite.fading {
    opacity: 0;
    filter: blur(6px);
    pointer-events: none;
}
.hero-invite .para-txt { margin-top: 20px; }

.feeling-chips {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 36px;
}
@media (max-width: 640px) {
    .feeling-chips {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        margin: 36px -24px 0;
        padding: 2px 24px 12px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .feeling-chips::-webkit-scrollbar { display: none; }
}
.feeling-chip {
    flex-shrink: 0;
    border: 1px solid var(--hairline);
    background: color-mix(in srgb, var(--paper-raised) 78%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--ink-soft);
    font-family: 'General Sans', 'Hanken Grotesk', 'Instrument Sans', 'Inter', sans-serif;
    font-size: 15px;
    padding: 12px 20px;
    border-radius: 100px;
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s, transform 0.35s cubic-bezier(0.12, 0.23, 0.5, 1), box-shadow 0.35s;
}
.feeling-chip:hover {
    border-color: var(--gold);
    color: var(--ink);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -10px rgba(146, 155, 170, 0.45);
}
.hero-alive .hero-note { margin-top: 26px; }

/* ---------- The found verse ---------- */

.hero-found { text-align: center; }
.hero-found[hidden] { display: none; }

/* Deck cards enter via the shared cardIn animation (landing.css),
   staggered one after another; the lens-focus JS owns them afterwards */
.found-card-wrap .verse-slider .verse-card {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
}
.found-card-wrap .verse-slider .verse-card::before { width: 72px; transition: none; }
/* The first card additionally draws its gold thread and takes the glint */
.found-card-wrap .verse-slider .verse-card.materialized::before {
    width: 0;
    animation: threadDraw 1.1s cubic-bezier(0.12, 0.23, 0.5, 1) 0.45s forwards;
}
@keyframes threadDraw { to { width: 72px; } }
.found-card-wrap .slider-dots { margin-top: 16px; }
.found-card-wrap .swipe-hint { margin-top: 10px; }
.thread-glint {
    position: absolute;
    top: -2px;
    left: 50%;
    width: 34px;
    height: 6px;
    border-radius: 100px;
    transform: translateX(-50%);
    background: radial-gradient(ellipse at center, rgba(242, 246, 255, 0.95), transparent 72%);
    opacity: 0;
    pointer-events: none;
}
.materialized .thread-glint { animation: glintSweep 1.5s cubic-bezier(0.12, 0.23, 0.5, 1) 1s 1; }
@keyframes glintSweep {
    0%   { opacity: 0; transform: translateX(calc(-50% - 60px)); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(calc(-50% + 60px)); }
}

.found-actions {
    margin-top: 28px;
    display: flex;
    gap: 26px;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.6s ease 0.35s;
}
.hero-found.settled .found-actions { opacity: 1; }
.found-actions button, .found-actions a {
    background: none;
    border: none;
    font-family: 'General Sans', 'Hanken Grotesk', 'Instrument Sans', 'Inter', sans-serif;
    font-size: 14px;
    color: var(--ink-soft);
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid var(--gold-soft);
    padding-bottom: 2px;
    transition: color 0.25s;
}
.found-actions button:hover, .found-actions a:hover { color: var(--ink); }

/* ---------- Recitation cadence: words arrive one breath at a time ---------- */

.cadence .w {
    display: inline-block;
    opacity: 0;
    transform: translateY(16px);
    filter: blur(5px);
    animation: wordIn 0.8s cubic-bezier(0.12, 0.23, 0.5, 1) forwards;
}
@keyframes wordIn {
    to { opacity: 1; transform: none; filter: none; }
}

/* ---------- ۞ scroll dial ---------- */

.scroll-dial {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 40;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: 18px;
    opacity: 0.38;
    pointer-events: none;
    transition: opacity 0.4s;
}
.scroll-dial.complete { opacity: 0.85; text-shadow: 0 0 12px rgba(185,152,89,0.6); }

/* ---------- Paper grain: the page feels printed, not rendered ---------- */

.grain {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.028;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Respect for stillness ---------- */

@media (prefers-reduced-motion: reduce) {
    .cadence .w { animation: none; opacity: 1; transform: none; filter: none; }
    .found-card-wrap .verse-card {
        transition: opacity 0.6s ease;
        transform: none;
        filter: none;
    }
    .thread-glint { display: none; }
    .feeling-chip { transition: border-color 0.3s, color 0.3s; }
}

/* ==========================================================================
   Rev 3 — the framed-settle entrance & drawn hairlines
   Cards arrive like frames being hung: rising with the faintest forward
   lean, settling flat as they reach eye level. Shadows grow as they land.
   ========================================================================== */

.step.reveal, .quote.reveal, .demo-frame.reveal, .stat-card.reveal,
.pricing-card-main.reveal, .features-list.reveal, .pillars.reveal,
.faq-list.reveal {
    transform: perspective(1100px) translateY(36px) rotateX(4deg) scale(0.975);
    transform-origin: 50% 100%;
    box-shadow: 0 0 0 rgba(27, 29, 30, 0);
    transition: opacity 1.5s cubic-bezier(0.12, 0.23, 0.5, 1),
                transform 1.5s cubic-bezier(0.12, 0.23, 0.5, 1),
                filter 1.5s cubic-bezier(0.12, 0.23, 0.5, 1),
                box-shadow 1.5s cubic-bezier(0.12, 0.23, 0.5, 1);
}
.step.reveal.in, .quote.reveal.in, .demo-frame.reveal.in, .stat-card.reveal.in,
.pricing-card-main.reveal.in, .features-list.reveal.in, .pillars.reveal.in,
.faq-list.reveal.in {
    transform: perspective(1100px) translateY(0) rotateX(0deg) scale(1);
}

/* Kicker hairlines draw outward as the label arrives */
.kicker.reveal::before, .kicker.reveal::after {
    width: 0;
    transition: width 1.1s cubic-bezier(0.12, 0.23, 0.5, 1) 0.5s;
}
.kicker.reveal.in::before, .kicker.reveal.in::after { width: 28px; }

/* Section titles settle from a soft ink-wash */
h2.section-title.reveal { filter: blur(8px); }

@media (prefers-reduced-motion: reduce) {
    .step.reveal, .quote.reveal, .demo-frame.reveal, .stat-card.reveal,
    .pricing-card-main.reveal, .features-list.reveal, .pillars.reveal,
    .faq-list.reveal { transform: none; transition: opacity 0.6s ease; }
    .kicker.reveal::before, .kicker.reveal::after { width: 28px; transition: none; }
}

/* Fix: titles sharpen fully once settled */
h2.section-title.reveal.in { filter: blur(0); }

/* Accent words inside cadence headlines: blue, italic, alive */
.cadence .w.accent { color: var(--accent); font-style: italic; }

/* ==========================================================================
   The living URL as a designed object: a floating miniature browser
   ========================================================================== */

.ps-stage {
    max-width: 640px;
    margin: 56px auto 26px;
    position: relative;
    padding: 40px 26px 36px;
    border-radius: 22px;
    background:
        radial-gradient(120% 120% at 50% 0%, rgba(37, 99, 235, 0.07), transparent 60%),
        var(--paper-raised);
    border: 1px solid var(--hairline);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    text-align: center;
}
.ps-stage::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 72px; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ps-stage .bg-mark {
    position: absolute;
    right: -16px; bottom: -26px;
    font-size: 130px;
    line-height: 1;
    color: var(--gold);
    opacity: 0.07;
    pointer-events: none;
    user-select: none;
}
.browser-frame {
    max-width: 470px;
    margin: 22px auto 0;
    background: var(--paper);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    box-shadow:
        0 22px 44px -20px rgba(27, 29, 30, 0.28),
        0 2px 6px rgba(27, 29, 30, 0.05);
    overflow: hidden;
    animation: floatBreeze 9s ease-in-out infinite;
}
.bf-top {
    display: flex;
    gap: 6px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--hairline);
}
.bf-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hairline); }
.bf-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 14px;
    padding: 12px 18px;
    background: var(--paper-raised);
    border: 1px solid var(--hairline);
    border-radius: 100px;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(17px, 4.4vw, 22px);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
}
.bf-lock { flex-shrink: 0; width: 13px; height: 13px; color: var(--gold); }
.ps-stage .ps-desc { margin-top: 20px; }
.ps-stage .ps-how { margin-top: 12px; font-size: 0.92em; opacity: 0.85; line-height: 1.65; }

.ps-stage.reveal {
    transform: perspective(1100px) translateY(36px) rotateX(4deg) scale(0.975);
    transform-origin: 50% 100%;
    transition: opacity 1.5s cubic-bezier(0.12, 0.23, 0.5, 1),
                transform 1.5s cubic-bezier(0.12, 0.23, 0.5, 1),
                filter 1.5s cubic-bezier(0.12, 0.23, 0.5, 1);
}
.ps-stage.reveal.in { transform: perspective(1100px) translateY(0) rotateX(0deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
    .ps-stage.reveal { transform: none; transition: opacity 0.6s ease; }
    .browser-frame { animation: none; }
}

/* ==========================================================================
   The arrival: a one-breath veil, once per visit
   ========================================================================== */

.veil {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: var(--paper);
    display: grid;
    place-items: center;
    transition: opacity 0.7s cubic-bezier(0.12, 0.23, 0.5, 1), visibility 0.7s;
}
.veil.lift { opacity: 0; visibility: hidden; }
.veil .veil-mark {
    font-size: 34px;
    color: var(--gold);
    position: relative;
    animation: veilBreathe 1.1s cubic-bezier(0.12, 0.23, 0.5, 1) both;
}
.veil .veil-mark::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 130px; height: 1px;
    transform: translate(-50%, -50%) scaleX(0);
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: veilLine 0.9s cubic-bezier(0.12, 0.23, 0.5, 1) 0.25s both;
}
@keyframes veilBreathe {
    from { opacity: 0; transform: scale(0.85); filter: blur(6px); }
    to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes veilLine {
    to { transform: translate(-50%, -50%) scaleX(1); }
}

/* Day motes: dust drifting through morning light, page-wide */
#ambient-motes {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 1;
    transition: opacity 1.2s ease;
}
body.dark-mode #ambient-motes { opacity: 0; } /* night belongs to the stars */

/* A passing light across primary buttons on hover */
.button { position: relative; overflow: hidden; }
.button::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    transition: left 0.7s cubic-bezier(0.12, 0.23, 0.5, 1);
    pointer-events: none;
}
.button:hover::after { left: 120%; }

@media (prefers-reduced-motion: reduce) {
    .veil { display: none; }
    #ambient-motes { display: none; }
    .button::after { display: none; }
}