/* ==========================================================================
   Clear Pano - User Guide page
   (loads after styles.css; reuses its tokens, container, buttons, footer)
   ========================================================================== */

.guide-page { background-color: var(--color-white); }

/* Hero */
.guide-hero {
    background-color: var(--color-primary-light);
    padding: calc(64px + var(--spacing-2xl)) 0 var(--spacing-2xl);
    text-align: center;
}
.guide-eyebrow {
    display: inline-block;
    background-color: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 16px;
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-lg);
}
.guide-title {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}
.guide-sub {
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0 auto;
}

/* Steps */
.guide-steps { padding: var(--spacing-3xl) 0; }
.guide-step {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    max-width: 960px;
    margin: 0 auto var(--spacing-3xl);
}
.guide-step:last-child { margin-bottom: 0; }
.guide-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #fff;
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}
.guide-step-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}
.guide-step-text {
    font-size: var(--font-size-lg);
    line-height: 1.6;
    color: var(--color-text-secondary);
}
.guide-step-text strong { color: var(--color-text-primary); font-weight: 600; }
.guide-phone-wrap { display: flex; justify-content: center; }

/* CTA */
.guide-cta {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
    padding: var(--spacing-3xl) 0;
    text-align: center;
    color: #fff;
}
.guide-cta-title { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 800; margin-bottom: var(--spacing-md); color: #fff; }
.guide-cta-sub { font-size: var(--font-size-lg); color: rgba(255,255,255,0.92); max-width: 600px; margin: 0 auto var(--spacing-xl); }
.guide-cta .btn { background-color: #fff; color: var(--color-primary); }
.guide-cta .btn:hover { background-color: rgba(255,255,255,0.92); }

@media (min-width: 860px) {
    .guide-step { grid-template-columns: 1fr 296px; gap: var(--spacing-3xl); }
    .guide-step.reverse { grid-template-columns: 296px 1fr; }
    .guide-step.reverse .guide-phone-wrap { order: -1; }
}

/* ==========================================================================
   Phone mockup — shared shell
   ========================================================================== */
.g-frame {
    width: 264px;
    padding: 5px;
    background: #000;
    border-radius: 34px;
    border: 1px solid #2c2c30;
    box-sizing: content-box;
}
.g-screen {
    position: relative;
    width: 264px;
    height: 540px;
    border-radius: 30px;
    overflow: hidden;
    box-sizing: content-box;
}
.g-screen > svg { position: absolute; top: 0; left: 0; }

/* iOS status bar (light content) */
.g-status {
    position: absolute; top: 9px; left: 0; right: 0; z-index: 6;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 16px; color: #fff;
}
.g-status.dark { color: #1c1c1e; }
.g-status .g-time { font-size: 13px; font-weight: 500; }
.g-status-icons { display: flex; align-items: center; gap: 6px; }

/* Editor frosted top bar */
.g-etop {
    position: absolute; top: 0; left: 0; right: 0; height: 66px; z-index: 5;
    background: rgba(26,26,30,0.55); backdrop-filter: blur(8px);
}
.g-etop .g-status { position: static; padding: 8px 16px 0; }
.g-etop-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px 0; color: #fff;
}
.g-round { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.18); display: flex; align-items: center; justify-content: center; }
.g-etop-title { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; }

/* Frosted bottom toolbar */
.g-bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
    background: rgba(26,26,30,0.62); backdrop-filter: blur(8px);
}
.g-tool { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; }
.g-tool span { font-size: 10px; line-height: 1.1; }

/* Tap cursor */
.g-cursor {
    position: absolute; width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255,255,255,0.35); border: 2px solid rgba(255,255,255,0.85);
    transform-origin: center; z-index: 7; pointer-events: none;
}
.g-cursor.dark { background: rgba(40,40,45,0.22); border-color: rgba(40,40,45,0.55); }

/* ==========================================================================
   Step 1 — Home: tap New Tour
   ========================================================================== */
.s1-card { transform-origin: center; animation: s1card 11s infinite; }
.s1-screen { transform: translateY(102%); animation: s1screen 11s infinite; }
.s1-cursor { top: 196px; left: 57px; opacity: 0; animation: s1cur 11s infinite; }
@keyframes s1card { 0%,20%{transform:scale(1)} 26%{transform:scale(.94)} 33%,100%{transform:scale(1)} }
@keyframes s1screen { 0%,30%{transform:translateY(102%)} 42%,86%{transform:translateY(0)} 94%,100%{transform:translateY(102%)} }
@keyframes s1cur { 0%{opacity:0} 8%{opacity:1} 22%{transform:scale(1)} 27%{transform:scale(.7)} 33%{transform:scale(1)} 38%{opacity:0} 100%{opacity:0} }

/* ==========================================================================
   Step 2 — Import: Browse Photos -> scenes load
   ========================================================================== */
.s2-btn { transform-origin: center; animation: s2btn 12s infinite; }
.s2-cursor { opacity: 0; animation: s2cur 12s infinite; }
.s2-picker { transform: translateY(102%); animation: s2picker 12s infinite; }
.s2-sel { opacity: 0; transform-origin: center; animation: s2sel 12s infinite; }
.s2-sel.d1 { animation-delay: -0.6s; }
.s2-sel.d2 { animation-delay: -0.4s; }
.s2-sel.d3 { animation-delay: -0.2s; }
.s2-thumb { opacity: 0; transform: scale(.4); transform-origin: center; animation: s2t 12s infinite; }
.s2-thumb.t2 { animation-delay: -11.7s; }
.s2-thumb.t3 { animation-delay: -11.4s; }
.s2-thumb.t4 { animation-delay: -11.1s; }
@keyframes s2btn { 0%,11%{transform:scale(1)} 15%{transform:scale(.95)} 21%,100%{transform:scale(1)} }
@keyframes s2cur { 0%{opacity:0;left:117px;top:270px;transform:scale(1)} 6%{opacity:1} 13%{transform:scale(.7)} 18%{transform:scale(1)} 23%{opacity:0;left:117px;top:270px} 55%{opacity:0;left:221px;top:26px;transform:scale(1)} 61%{opacity:1} 68%{transform:scale(.7)} 73%{transform:scale(1)} 79%{opacity:0} 100%{opacity:0;left:221px;top:26px} }
@keyframes s2picker { 0%,18%{transform:translateY(102%)} 26%,76%{transform:translateY(0)} 84%,100%{transform:translateY(102%)} }
@keyframes s2sel { 0%,34%{opacity:0;transform:scale(.3)} 42%{opacity:1;transform:scale(1)} 74%{opacity:1} 80%,100%{opacity:0} }
@keyframes s2t { 0%,84%{opacity:0;transform:scale(.4)} 90%{opacity:1;transform:scale(1)} 98%{opacity:1} 100%{opacity:0;transform:scale(.4)} }

/* ==========================================================================
   Step 3 — Colour grade: slider -> vivid
   ========================================================================== */
.s3-veil { animation: s3veil 12s infinite; }
.s3-thumb { animation: s3thumb 12s infinite; }
.s3-cursor { top: 497px; opacity: 0; animation: s3cur 12s infinite; }
@keyframes s3veil { 0%,16%{opacity:1} 54%,90%{opacity:0} 100%{opacity:1} }
@keyframes s3thumb { 0%,16%{left:22%} 54%,90%{left:78%} 100%{left:22%} }
@keyframes s3cur { 0%{opacity:0} 8%{opacity:1;left:50px} 16%{left:50px} 54%{left:188px} 90%{left:188px} 96%,100%{opacity:0} }

/* ==========================================================================
   Step 4 — Object removal (red mask) : er-* classes
   ========================================================================== */
.er-tripod { animation: ertripod 13s infinite; }
.er-mask { opacity: 0; animation: ermask 13s infinite; }
.er-brush { top: 412px; opacity: 0; animation: erbrush 13s infinite; }
@keyframes ertripod { 0%,54%{opacity:1} 66%{opacity:0} 88%{opacity:0} 100%{opacity:1} }
@keyframes ermask { 0%,14%{opacity:0} 44%{opacity:.6} 54%{opacity:.6} 66%,100%{opacity:0} }
@keyframes erbrush { 0%{left:95px;opacity:0} 10%{opacity:1} 14%{left:95px} 28%{left:159px} 40%{left:103px} 50%{left:150px} 56%{left:130px;opacity:1} 64%{opacity:0} 100%{left:130px;opacity:0} }

/* ==========================================================================
   Rename tour — tap the title, the Tour Information screen slides up
   ========================================================================== */
.s4-screen { transform: translateY(102%); animation: s4screen 12s infinite; }
.s4-cursor { top: 38px; left: 117px; opacity: 0; animation: s4cur 12s infinite; }
@keyframes s4screen { 0%,28%{transform:translateY(102%)} 40%,88%{transform:translateY(0)} 96%,100%{transform:translateY(102%)} }
@keyframes s4cur { 0%{opacity:0} 6%{opacity:1} 14%{transform:scale(1)} 18%{transform:scale(.7)} 23%{transform:scale(1)} 28%{opacity:0} 100%{opacity:0} }

/* ==========================================================================
   Step 5 — Hotspot: tap Hotspot -> marker drops on doorway
   ========================================================================== */
.s5-marker { opacity: 0; transform-box: fill-box; transform-origin: center; animation: s5mark 11s infinite; }
.s5-cursor { top: 497px; left: 140px; opacity: 0; animation: s5cur 11s infinite; }
.s5-hl { position: absolute; inset: 5px 3px; border-radius: 8px; background: rgba(255,255,255,0.22); opacity: 0; animation: s5hl 11s infinite; }
@keyframes s5mark { 0%,26%{opacity:0;transform:scale(.3) translateY(-8px)} 34%{opacity:1;transform:scale(1) translateY(0)} 44%{transform:scale(1.12)} 52%{transform:scale(1)} 92%{opacity:1;transform:scale(1)} 98%,100%{opacity:0} }
@keyframes s5cur { 0%{opacity:0} 8%{opacity:1} 22%{transform:scale(1)} 27%{transform:scale(.7)} 33%{transform:scale(1)} 42%{opacity:0} 100%{opacity:0} }
@keyframes s5hl { 0%,21%{opacity:0} 26%{opacity:1} 36%,100%{opacity:0} }

/* ==========================================================================
   Step 6 — Text: tap Text -> label appears
   ========================================================================== */
.s6-label { opacity: 0; animation: s6lab 11s infinite; }
.s6-cursor { top: 497px; opacity: 0; animation: s6cur 11s infinite; }
.s6-hl { position: absolute; inset: 5px 3px; border-radius: 8px; background: rgba(255,255,255,0.22); opacity: 0; animation: s6hl 11s infinite; }
@keyframes s6lab { 0%,30%{opacity:0} 40%,92%{opacity:1} 98%,100%{opacity:0} }
@keyframes s6cur { 0%{opacity:0} 8%{opacity:1} 23%{transform:scale(1)} 28%{transform:scale(.7)} 34%{transform:scale(1)} 44%{opacity:0} 100%{opacity:0} }
@keyframes s6hl { 0%,22%{opacity:0} 28%{opacity:1} 40%,100%{opacity:0} }

/* ==========================================================================
   Step 7 — Preview: pan around + navigate to next room
   ========================================================================== */
.s7-room2 { opacity: 0; animation: s7room2 14s infinite; }
.s8-cur { opacity: 0; animation: s8pcur 14s infinite; }
@keyframes s7room2 { 0%,38%{opacity:0} 48%{opacity:1} 84%{opacity:1} 92%,100%{opacity:0} }
@keyframes s8pcur { 0%{opacity:0} 8%{opacity:1} 24%{transform:scale(1)} 30%{transform:scale(.7)} 36%{transform:scale(1)} 44%{opacity:0} 100%{opacity:0} }

/* ==========================================================================
   Step 8 — Publish: Copy Link -> toast
   ========================================================================== */
.s8-btn { transform-origin: center; animation: s8btn 11s infinite; }
.s8-cursor { opacity: 0; animation: s8cur 11s infinite; }
.s8-toast { opacity: 0; transform: translateX(-50%) translateY(8px); animation: s8toast 11s infinite; }
.gsv-ready { animation: gsvready 11s infinite; }
.gsv-pub { opacity: 0; animation: gsvpub 11s infinite; }
@keyframes s8btn { 0%,4%{transform:scale(1)} 8%{transform:scale(.96)} 13%,100%{transform:scale(1)} }
@keyframes s8cur { 0%{opacity:0;left:57px;top:240px;transform:scale(1)} 4%{opacity:1} 8%{transform:scale(.7)} 12%{transform:scale(1)} 18%{opacity:0;left:57px;top:240px} 38%{opacity:0;left:117px;top:415px;transform:scale(1)} 42%{opacity:1} 47%{transform:scale(.7)} 51%{transform:scale(1)} 58%{opacity:0} 100%{opacity:0;left:117px;top:415px} }
@keyframes s8toast { 0%,8%{opacity:0;transform:translateX(-50%) translateY(8px)} 11%{opacity:1;transform:translateX(-50%) translateY(0)} 27%{opacity:1;transform:translateX(-50%) translateY(0)} 32%,100%{opacity:0;transform:translateX(-50%) translateY(8px)} }
@keyframes gsvready { 0%,47%{opacity:1} 50%,96%{opacity:0} 100%{opacity:1} }
@keyframes gsvpub { 0%,47%{opacity:0} 50%{opacity:1} 96%{opacity:1} 100%{opacity:0} }

/* ==========================================================================
   Reduced motion — freeze each animation on a meaningful frame
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .s1-card, .s1-screen, .s1-cursor,
    .s2-btn, .s2-cursor, .s2-thumb, .s2-picker, .s2-sel,
    .s3-veil, .s3-thumb, .s3-cursor,
    .er-tripod, .er-mask, .er-brush, .s4-screen, .s4-cursor,
    .s5-marker, .s5-cursor, .s5-hl,
    .s6-label, .s6-cursor, .s6-hl,
    .s7-room2, .s8-cur,
    .s8-btn, .s8-cursor, .s8-toast, .gsv-ready, .gsv-pub { animation: none !important; }

    .s1-screen { transform: translateY(0); }
    .s1-cursor, .s2-cursor, .s3-cursor, .s5-cursor, .s6-cursor, .s8-cursor { opacity: 0; }
    .s2-thumb { opacity: 0; transform: scale(1); }
    .s2-picker { transform: translateY(0); }
    .s2-sel { opacity: 1; transform: scale(1); }
    .s3-veil { opacity: 0; }
    .s3-thumb { left: 78%; }
    .er-tripod { opacity: 0; }
    .er-mask { opacity: 0; }
    .er-brush { opacity: 0; }
    .s4-screen { transform: translateY(0); }
    .s4-cursor { opacity: 0; }
    .s5-marker { opacity: 1; transform: scale(1); }
    .s5-hl, .s6-hl { opacity: 0; }
    .s6-label { opacity: 1; }
    .s7-room2 { opacity: 0; }
    .s8-toast { opacity: 1; transform: translateX(-50%); }
    .gsv-ready { opacity: 0; }
    .gsv-pub { opacity: 1; }
}