/* Muslim Ohio opening: "the Veil".
 *
 * The games' scene change (Deen Dash and Shawarma Grille, src/scenes/Veil.js;
 * js/veil.js on this site), holding the Bismillah and the Muslim Ohio logo.
 * Deep forest, and the games' star tiles (amber
 * star, forest star turned an eighth, cream heart) bloom out from the centre
 * on their grid, leaving a calm clearing for the words. The Bismillah comes
 * in, then the logo: the header's own lockup (mark and MUSLIM / OHIO) at
 * --k times its size, in cream. On reveal (js/ohio-animation.js) the stars
 * scatter exactly as the games' do and the logo flies home into the header.
 *
 * Everything here is static markup (index.html), so it paints before any
 * script. Only transform and opacity animate.
 *
 * CSS-LEVEL FAILSAFE. JS removes the overlay on the happy path. If the JS never
 * runs (a broken import once left the whole site behind a blank overlay), this
 * browser-owned animation stops the overlay covering the page after 6 s anyway.
 */

.ohio-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    cursor: pointer;
    pointer-events: all;
    animation: ohio-hard-failsafe 6s step-end forwards;
    /* The grid step, a star tile (the games' stars are a touch bigger than
       their step, so they overlap), and the logo's scale (x the header's). */
    --g: clamp(120px, min(15vw, 24vh), 320px);
    --s: calc(var(--g) * 1.12);
    --k: 3;
    --back-out: cubic-bezier(0.34, 1.56, 0.64, 1);      /* the games' Back.out */
    --out: cubic-bezier(0.22, 1, 0.36, 1);
    --mo-star: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20160%22%3E%20%3Cpath%20d%3D%22M80%204L102.1%2026.64L133.74%2026.26L133.36%2057.9L156%2080L133.36%20102.1L133.74%20133.74L102.1%20133.36L80%20156L57.9%20133.36L26.26%20133.74L26.64%20102.1L4%2080L26.64%2057.9L26.26%2026.26L57.9%2026.64Z%22%20fill%3D%22%23e3a340%22%2F%3E%20%3Cpath%20d%3D%22M99.13%2033.81L106.87%2053.13L126.19%2060.87L118%2080L126.19%2099.13L106.87%20106.87L99.13%20126.19L80%20118L60.87%20126.19L53.13%20106.87L33.81%2099.13L42%2080L33.81%2060.87L53.13%2053.13L60.87%2033.81L80%2042Z%22%20fill%3D%22%2312362f%22%2F%3E%20%3Cpath%20d%3D%22M80%2056L86.98%2063.15L96.97%2063.03L96.85%2073.02L104%2080L96.85%2086.98L96.97%2096.97L86.98%2096.85L80%20104L73.02%2096.85L63.03%2096.97L63.15%2086.98L56%2080L63.15%2073.02L63.03%2063.03L73.02%2063.15Z%22%20fill%3D%22%23fbeed6%22%2F%3E%3C%2Fsvg%3E");
    --mo-orn: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%2020%22%3E%20%3Cpath%20d%3D%22M0%2010H84M116%2010H200%22%20stroke%3D%22%23e3a340%22%20stroke-opacity%3D%220.5%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20d%3D%22M100%200.5L102.76%203.33L106.72%203.28L106.67%207.24L109.5%2010L106.67%2012.76L106.72%2016.72L102.76%2016.67L100%2019.5L97.24%2016.67L93.28%2016.72L93.33%2012.76L90.5%2010L93.33%207.24L93.28%203.28L97.24%203.33Z%22%20fill%3D%22%23e3a340%22%2F%3E%20%3Cpath%20d%3D%22M102.39%204.23L103.36%206.64L105.77%207.61L104.75%2010L105.77%2012.39L103.36%2013.36L102.39%2015.77L100%2014.75L97.61%2015.77L96.64%2013.36L94.23%2012.39L95.25%2010L94.23%207.61L96.64%206.64L97.61%204.23L100%205.25Z%22%20fill%3D%22%2312362f%22%2F%3E%20%3Cpath%20d%3D%22M100%207L100.87%207.89L102.12%207.88L102.11%209.13L103%2010L102.11%2010.87L102.12%2012.12L100.87%2012.11L100%2013L99.13%2012.11L97.88%2012.12L97.89%2010.87L97%2010L97.89%209.13L97.88%207.88L99.13%207.89Z%22%20fill%3D%22%23fbeed6%22%2F%3E%3C%2Fsvg%3E");
}
@media (orientation: landscape) and (max-width: 1100px), (orientation: landscape) and (max-height: 800px) { .ohio-intro-overlay { --k: 2.6; } }
@media (orientation: landscape) and (max-height: 560px) { .ohio-intro-overlay { --k: 1.6; } }
@media (orientation: portrait) { .ohio-intro-overlay { --g: clamp(96px, 29vw, 200px); --k: 2.2; } }
@media (orientation: portrait) and (max-width: 374px) { .ohio-intro-overlay { --k: 1.9; } }
@media (orientation: portrait) and (max-width: 339px) { .ohio-intro-overlay { --k: 1.7; } }
@media (orientation: portrait) and (min-width: 600px) { .ohio-intro-overlay { --k: 3; } }

/* Visibility only: animating opacity here would make the overlay a "backdrop
   root" and change how it composites over the page. */
@keyframes ohio-hard-failsafe {
    0%, 99% { visibility: visible; pointer-events: all; }
    100%    { visibility: hidden; pointer-events: none; }
}

/* While it plays, the header logo waits for the words to land on it. */
.intro-playing .mo-brand { opacity: 0; }

/* Seen this session (or the installed app): never paint it at all. */
.intro-seen .ohio-intro-overlay { display: none !important; }

/* The veil's ground, as in the games: forest going deeper towards the foot,
   and a little light where the words sit. (No hills: stretched to a phone's
   width they squashed into a dome at the foot.) */
.mo-veil {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse calc(var(--g) * 2.2) calc(var(--g) * 1.7) at 50% 50%, rgba(33, 86, 72, 0.55), rgba(33, 86, 72, 0)),
        linear-gradient(180deg, #12362f, #081c18);
}

/* The field: the games' star tiles on a hex grid centred on the screen
   (odd rows half a step over), placed in grid units by the markup (--x, --y).
   Each is turned by its own --a like the games' random angles, and blooms
   from nothing with the games' Back.out, nearest the words first (--d). */
.mo-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.mo-stars i {
    position: absolute;
    left: calc(50% + var(--x) * var(--g) - var(--s) / 2);
    top: calc(50% + var(--y) * var(--g) * 0.866 - var(--s) / 2);
    width: var(--s);
    height: var(--s);
    background: var(--mo-star) center / 100% 100% no-repeat;
    transform: translate(0px, 0px) rotate(calc(var(--a) * 1deg)) scale(1);
    animation: mo-bloom 240ms var(--back-out) calc(60ms + var(--d) * 75ms) both;
}
@keyframes mo-bloom { from { transform: translate(0px, 0px) rotate(calc(var(--a) * 1deg - 45deg)) scale(0); } }

/* The words: the Bismillah over the logo, one lockup in the clearing. */
.mo-lockup {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    display: grid;
    justify-items: center;
    gap: calc(var(--k) * 4px);
}
/* The Bismillah, in the tiles' gold. */
.mo-bismillah {
    font-family: var(--font-arabic, 'Amiri'), 'Geeza Pro', serif;
    font-size: calc(var(--k) * 14px);
    line-height: 1.5;
    white-space: nowrap;
    color: #f0c46e;
    text-shadow: 0 1px 0 rgba(0, 18, 14, 0.5);
    animation: mo-rise 700ms var(--out) 200ms both;
}
@keyframes mo-rise { from { opacity: 0; transform: translateY(8px); } }
/* A hairline with one small star tile between them. */
.mo-ornament {
    width: calc(var(--k) * 64px);
    height: calc(var(--k) * 6.4px);
    background: var(--mo-orn) center / contain no-repeat;
    animation: mo-rule 700ms var(--out) 360ms both;
}
@keyframes mo-rule { from { opacity: 0; transform: scaleX(0.3); } }

/* The logo: exactly the header's (.mo-brand in css/theme.css) times --k, so
   flying it home is one uniform scale that lands on it. It only fades in:
   its position never moves before the flight measures it. */
.mo-name {
    position: relative;
    display: flex;
    align-items: center;
    gap: calc(0.6rem * var(--k));
    color: #fbeed6;
    transform-origin: 0 0;
    animation: mo-fade 700ms ease-out 420ms both;
}
@keyframes mo-fade { from { opacity: 0; } }
.mo-name img { width: calc(38px * var(--k)); height: calc(38px * var(--k)); object-fit: contain; flex: 0 0 auto; }
.mo-name > img { filter: sepia(1) brightness(0.99); }     /* the white mark, warmed to the cream of the words */
.mo-word {
    font-family: var(--font-display, 'Outfit'), system-ui, sans-serif;
    font-weight: 700;
    font-size: calc(1.02rem * var(--k));
    line-height: 0.95;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.mo-word small { display: block; font-size: 0.98em; }
@media (max-width: 991.98px) {
    .mo-name img { width: calc(34px * var(--k)); height: calc(34px * var(--k)); }
    .mo-word { font-size: calc(0.92rem * var(--k)); }
}
/* The forest copy of the logo, faded in on the way home over the cream page. */
.mo-forest { position: absolute; inset: 0; display: flex; align-items: center; gap: inherit; color: var(--forest, #12362f); opacity: 0; }

/* Reduced motion: the finished composition, then a calm fade (JS). theme.css
   shortens every animation to nothing here, so give the failsafe its 6 s back. */
@media (prefers-reduced-motion: reduce) {
    .ohio-intro-overlay { animation-duration: 6s !important; }
    .mo-stars i, .mo-bismillah, .mo-ornament, .mo-name { animation: none; }
}