/* ============================================================ Moss Point Main Street — signature EVENT landing template v2. Loaded after styles.css. House C base; per-event character via . Built to stand next to /levitt/ : animated hero fx, kinetic type, count-up stats, scroll reveals, big watermark, signature marquee. ============================================================ */ :root{ --ev-accent:#236a66; --ev-accent2:#2f8a85; --ev-deep:#0b2530; } body[data-ev]{--brass:#c19a57} /* scroll-reveal (self-contained, JS adds .r-in; visible if JS/reduced) */ .ev-js [data-r]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .ev-js [data-r].r-in{opacity:1;transform:none} .ev-js [data-r="scale"]{transform:scale(.94)} .ev-js [data-r="left"]{transform:translateX(-40px)} .ev-js [data-r="right"]{transform:translateX(40px)} /* ---------------- HERO ---------------- */ .ev-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; padding:9rem 0 clamp(3rem,7vh,5.5rem);overflow:hidden;color:#fff;isolation:isolate} .ev-hero__media{position:absolute;inset:0;z-index:-4;overflow:hidden} .ev-hero__media img{width:100%;height:110%;object-fit:cover;transform:scale(1.12);animation:evZoom 4s var(--ease) both;will-change:transform} @keyframes evZoom{to{transform:scale(1.02)}} .ev-hero__fx{position:absolute;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none} .ev-hero__grade{position:absolute;inset:0;z-index:-3;background: linear-gradient(180deg,rgba(6,20,26,.52) 0%,rgba(6,20,26,.18) 26%,rgba(6,20,26,.5) 60%,rgba(6,20,26,.97) 100%)} .ev-hero__tint{position:absolute;inset:0;z-index:-3;mix-blend-mode:multiply; background:linear-gradient(200deg,color-mix(in srgb,var(--ev-accent) 60%,transparent),transparent 58%)} /* oversized watermark of the event's short word */ .ev-hero__mark{position:absolute;z-index:-1;left:-2vw;bottom:-4vh;font-family:var(--serif);font-weight:700; font-size:26vw;line-height:.8;color:#fff;opacity:.06;letter-spacing:-.04em;pointer-events:none;white-space:nowrap;user-select:none} .ev-hero__in{position:relative;z-index:1} .ev-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:"Inter",var(--sans);font-weight:700; letter-spacing:.26em;text-transform:uppercase;font-size:.76rem;color:var(--brass-200);margin-bottom:1.2rem; opacity:0;animation:fadeIn .9s var(--ease) .5s forwards} .ev-eyebrow::before{content:"";width:34px;height:1.5px;background:var(--brass-200)} .ev-title{font-family:var(--serif);font-weight:600;font-size:clamp(3rem,1.2rem + 8vw,8rem);line-height:.9; letter-spacing:-.035em;text-shadow:0 6px 60px rgba(0,0,0,.45);max-width:15ch} .ev-title .mask{display:block;overflow:hidden;padding-bottom:.05em} .ev-title .mask span{display:block;animation:lnUp 1.05s var(--ease) backwards} .ev-title .mask:nth-child(1) span{animation-delay:.15s} .ev-title .mask:nth-child(2) span{animation-delay:.32s} .ev-title em{font-style:italic;color:var(--brass-200)} .ev-hero__foot{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.22);padding-top:1.5rem;margin-top:2.2rem;opacity:0;animation:fadeIn 1s var(--ease) .8s forwards} .ev-lede{max-width:46ch;color:rgba(255,255,255,.94);font-size:clamp(1.06rem,1rem + .45vw,1.24rem)} .ev-chips{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.3rem} .ev-chips span{font-size:.78rem;font-weight:700;letter-spacing:.04em;background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);padding:.45rem .85rem;border-radius:100px;backdrop-filter:blur(5px)} .ev-hero__cta{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1.5rem} .btn-accent{background:var(--ev-accent);color:#fff}.btn-accent::before{background:#fff}.btn-accent:hover{color:var(--ev-accent)} .ev-scrollcue{position:absolute;left:50%;bottom:1.2rem;transform:translateX(-50%);z-index:2;font-size:.64rem; letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;flex-direction:column; align-items:center;gap:.5rem;opacity:0;animation:fadeIn 1s var(--ease) 1.5s forwards} .ev-scrollcue::after{content:"";width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:levCue 1.8s ease-in-out infinite} /* signature marquee strip under hero */ .ev-strip{background:var(--ev-accent);color:#fff;overflow:hidden;border-block:1px solid rgba(255,255,255,.16)} .ev-strip__t{display:flex;gap:2.4rem;width:max-content;white-space:nowrap;padding:.85rem 0; font-family:var(--serif);font-style:italic;font-size:1.2rem;animation:evMarq 32s linear infinite} .ev-strip__t span{display:inline-flex;gap:2.4rem;align-items:center} .ev-strip__t span::after{content:"◆";font-style:normal;font-size:.6em;opacity:.7} @keyframes evMarq{to{transform:translateX(-50%)}} /* ---------------- STORY + STATS ---------------- */ .ev-story{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,5rem);align-items:center} .ev-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px} .ev-stat{position:relative;background:var(--paper-2);border:1px solid var(--line);border-radius:14px;padding:1.7rem 1.4rem;overflow:hidden} .ev-stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--ev-accent2),var(--ev-accent))} .ev-stat b{display:block;font-family:var(--serif);font-size:clamp(2.1rem,1.4rem + 2.2vw,3.2rem);color:var(--ev-accent);line-height:1} .ev-stat span{display:block;margin-top:.4rem;font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)} /* ---------------- DARK band ---------------- */ .ev-dark{background:var(--ev-deep);color:#eaf3f5} .ev-dark .kicker{color:var(--brass-200)} .ev-dark h2.display,.ev-dark .display{color:#fff} .ev-dark .lede,.ev-dark p{color:rgba(255,255,255,.82)} /* ---------------- THEATER (full-bleed film moment, replaces boxed player) ---------------- */ .ev-theater{position:relative;min-height:88vh;display:flex;align-items:center;justify-content:center; overflow:hidden;isolation:isolate;color:#fff;background:#000} .ev-theater__bg{position:absolute;inset:0;z-index:-2} .ev-theater__bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s var(--ease)} .ev-theater:hover .ev-theater__bg img{transform:scale(1.09)} .ev-theater__scrim{position:absolute;inset:0;z-index:-1; background:radial-gradient(110% 110% at 50% 42%,rgba(3,14,18,.22),rgba(3,14,18,.82))} .ev-theater__in{text-align:center;padding:7rem 1.2rem;max-width:760px} .ev-theater__kicker{font-family:"Inter",var(--sans);font-weight:700;letter-spacing:.3em;text-transform:uppercase; font-size:.72rem;color:var(--brass-200);margin-bottom:1.2rem} .ev-theater__title{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,1.2rem + 3vw,3.6rem);line-height:1.05;text-wrap:balance;text-shadow:0 4px 40px rgba(0,0,0,.5)} .ev-theater__sub{margin-top:1rem;color:rgba(255,255,255,.85)} .ev-play{position:relative;width:clamp(86px,9vw,112px);aspect-ratio:1;border-radius:50%;margin:2.2rem auto 0; display:grid;place-items:center;cursor:pointer;border:1.5px solid rgba(255,255,255,.6); background:rgba(255,255,255,.12);backdrop-filter:blur(6px);color:#fff; transition:transform .35s var(--ease),background .35s,border-color .35s} .ev-play::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.35); animation:evPulse 2.4s var(--ease) infinite} .ev-play:hover,.ev-play:focus-visible{transform:scale(1.08);background:var(--ev-accent);border-color:var(--ev-accent)} .ev-play svg{width:34%;height:auto;margin-left:6%} @keyframes evPulse{0%{transform:scale(.85);opacity:0}35%{opacity:1}100%{transform:scale(1.25);opacity:0}} .ev-theater__frame{position:absolute;inset:0;z-index:2;display:none;background:#000} .ev-theater__frame iframe{width:100%;height:100%;border:0} .ev-theater.playing .ev-theater__frame{display:block} .ev-theater.playing .ev-theater__in{visibility:hidden} /* ---------------- GALLERY (editorial collage of real event photos) ---------------- */ .ev-gal{display:grid;gap:14px;grid-template-columns:repeat(4,1fr);grid-auto-rows:clamp(150px,17vw,240px);grid-auto-flow:dense;margin-top:2.8rem} .ev-gal .g{position:relative;border-radius:14px;overflow:hidden;background:var(--ev-deep)} .ev-gal .g.w2{grid-column:span 2} .ev-gal .g.h2{grid-row:span 2} .ev-gal .g img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .ev-gal .g:hover img{transform:scale(1.06)} .ev-gal .g figcaption{position:absolute;inset:auto 0 0 0;padding:2.4rem .95rem .8rem;color:#fff; font-size:.78rem;font-weight:700;letter-spacing:.05em;background:linear-gradient(transparent,rgba(3,14,18,.72)); opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s} .ev-gal .g:hover figcaption{opacity:1;transform:none} @media (max-width:760px){.ev-gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(130px,24vw,190px)}} /* ---------------- EXPECT cards ---------------- */ .ev-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem;margin-top:2.6rem} .ev-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:1.8rem 1.6rem; overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s,border-color .45s} .ev-card::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--ev-accent) 12%,transparent),transparent 60%);opacity:0;transition:opacity .45s} .ev-card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -34px rgba(6,37,48,.5);border-color:var(--ev-accent)} .ev-card:hover::before{opacity:1} .ev-card .ic{width:48px;height:48px;border-radius:13px;background:color-mix(in srgb,var(--ev-accent) 14%,#fff); color:var(--ev-accent);display:grid;place-items:center;font-size:1.4rem;margin-bottom:1rem;transition:transform .45s var(--ease)} .ev-card:hover .ic{transform:scale(1.1) rotate(-4deg)} .ev-card h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin-bottom:.4rem} .ev-card p{color:var(--ink-soft);font-size:.96rem;line-height:1.55;position:relative} /* ---------------- QUOTE (big, accent) ---------------- */ .ev-quote{position:relative;background:var(--ev-deep);color:#fff;overflow:hidden;text-align:center; padding-block:clamp(7rem,12vw,12rem)!important} .ev-quote::before{content:"\201C";position:absolute;top:1rem;left:50%;transform:translateX(-50%); font-family:var(--serif);font-size:16rem;line-height:1;color:#fff;opacity:.05;pointer-events:none} .ev-quote blockquote{position:relative;font-family:var(--serif);font-style:italic;font-size:clamp(2rem,1.2rem + 3.4vw,4rem); line-height:1.3;max-width:30ch;margin:0 auto;padding-inline:1.2rem;color:#fff;text-wrap:balance} .ev-quote cite{display:block;margin-top:2.6rem;font-style:normal;font-size:.92rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-200)} .ev-quote cite a{color:inherit;text-decoration:underline;text-underline-offset:3px} /* ---------------- GALLERY placeholder ---------------- */ .ev-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:2.4rem} .ev-gallery .g{aspect-ratio:4/5;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--ev-accent) 22%,#0b2530),var(--ev-deep));position:relative} .ev-gallery .g img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)} .ev-gallery .g:hover img{transform:scale(1.06)} .ev-gallery .g.tall{grid-row:span 1} @media(max-width:700px){.ev-gallery{grid-template-columns:repeat(2,1fr)}} /* ---------------- VISIT ---------------- */ .ev-visit-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start} .ev-facts{list-style:none;display:grid;gap:1rem} .ev-facts li{display:grid;grid-template-columns:30px 1fr;gap:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)} .ev-facts .ic{color:var(--ev-accent);font-size:1.15rem} .ev-facts b{display:block}.ev-facts span{color:var(--ink-soft);font-size:.94rem} .ev-map{border:0;width:100%;aspect-ratio:4/3;border-radius:14px;box-shadow:var(--shadow)} /* ---------------- CROSS-LINKS ---------------- */ .ev-more{background:var(--navy);color:#fff} .ev-more .kicker{color:var(--brass-200)} .ev-more h2.display{color:#fff} .ev-more__list a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem 0; border-bottom:1px solid rgba(255,255,255,.16);font-family:var(--serif);font-size:clamp(1.3rem,1rem + 1.5vw,2.1rem); color:#fff;transition:padding-left .4s var(--ease),color .4s} .ev-more__list a:first-child{border-top:1px solid rgba(255,255,255,.16)} .ev-more__list a:hover{padding-left:1rem;color:var(--brass-200)} .ev-more__list a .go{font-family:var(--sans);font-size:1.5rem;transition:transform .4s var(--ease)} .ev-more__list a:hover .go{transform:translateX(6px)} @media (max-width:900px){ .ev-story,.ev-visit-grid{grid-template-columns:1fr} .ev-stats{grid-template-columns:1fr 1fr} } @media (prefers-reduced-motion:reduce){ .ev-hero__media img,.ev-eyebrow,.ev-title .mask span,.ev-hero__foot,.ev-scrollcue{animation:none!important;opacity:1!important;transform:none!important} .ev-strip__t{animation:none!important}.ev-scrollcue::after{animation:none!important} .ev-hero__fx{display:none} .ev-js [data-r]{opacity:1!important;transform:none!important} }