/* ========================================================================== Homepage opening scene — /index.html (experience: "scrolly") Loaded in addition to css/styles.css. A single 100vh intro scene (typewriter → logo) that scrolls away to reveal the classic homepage underneath, unchanged (styles.css handles everything from the header down). ========================================================================== */ /* ------------------------------------------------------------------------ .page-content wraps the classic header + main so the classic `.site-header { position: absolute; top: 0 }` (styles.css) anchors to the top of this wrapper — i.e. right where scene-0 ends — instead of the top of the document. Scoped to this page only; styles.css is untouched. ------------------------------------------------------------------------ */ .scrolly-page .page-content { position: relative; } /* ------------------------------------------------------------------------ Scene 0 — الفتحة ------------------------------------------------------------------------ */ .scene-0 { position: relative; height: 100vh; } .scene-0 .scene-sticky { position: fixed; top: 0; left: 0; right: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 32px 24px; will-change: opacity; z-index: 1; } /* Fully faded out (past the crossfade point) — stop intercepting clicks on the real header/hero that's now visible underneath. */ .scene-0 .scene-sticky.is-hidden { visibility: hidden; pointer-events: none; } /* Skip the intro entirely after the first view this session (see the inline script in index.html's that sets this class from sessionStorage). */ html.intro-seen .scene-0 { display: none; } .scene0-typewriter { font-family: var(--font-ar); font-weight: 300; font-size: clamp(24px, 6vw, 40px); color: var(--paper); text-align: center; transition: opacity 0.6s ease; margin: 0; } .scene0-typewriter.is-fading { opacity: 0; } .scene0-cursor { display: inline-block; width: 2px; height: 0.9em; background: var(--gold); margin-inline-start: 4px; vertical-align: -0.1em; animation: sbCursorBlink 0.9s step-end infinite; } @keyframes sbCursorBlink { 50% { opacity: 0; } } .scene0-logo { position: absolute; display: flex; align-items: center; gap: 10px; font-family: var(--font-lat); font-size: 22px; letter-spacing: 0.08em; color: var(--paper); opacity: 0; transition: opacity 0.6s ease; } .scene0-logo.is-visible { opacity: 1; } .scene0-logo .logo-mark { width: 30px; height: 30px; } .scene0-hint { position: absolute; bottom: 48px; display: flex; flex-direction: column; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.6s ease; color: var(--paper-dim); font-size: 13px; } .scene0-hint.is-visible { opacity: 1; } .scene0-arrow { width: 12px; height: 12px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); animation: sbArrowPulse 1.6s ease-in-out infinite; } @keyframes sbArrowPulse { 0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.6; } 50% { transform: rotate(45deg) translate(2px, 2px); opacity: 1; } } /* ------------------------------------------------------------------------ Reduced motion — scene-0 collapses to a plain, compact, fully visible block (logo only, no typewriter, no pinning). ------------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .scene-0 { height: auto !important; } .scene-0 .scene-sticky { position: static; height: auto; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; padding: 64px 24px; } .scene0-typewriter, .scene0-hint { display: none; } .scene0-logo { position: static; opacity: 1; } .scene0-arrow { animation: none; } }