.gallery-preview{grid-template-rows:220px 220px 220px}.gallery-preview>div{grid-row:span 3}.tile-one{background-image:url('4/_DSC0001.JPG')}.tile-two{background-image:url('_IAPL%20-%20INTRA%20ASSOCIATION%20PREMIER%20LEAGUE_/IMG_1769.JPG')}.tile-three{background-image:url('ARISE%20FOOTBALL%20CHAMPIONSHIP%20S1/IMG_1757.JPG')}.tile-four{background-image:url('1/DSC06003.JPG')}.tile-five{background-image:url('2/DSC05998.JPG')}.hero{isolation:isolate}

/* Text reveal animations */
.reveal .text-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.visible .text-reveal {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger the delays with a helper class */
.reveal.visible .delay-1 { transition-delay: 0.2s; }
.reveal.visible .delay-2 { transition-delay: 0.4s; }
.reveal.visible .delay-3 { transition-delay: 0.6s; }
.reveal.visible .delay-4 { transition-delay: 0.8s; }

/* Hero slider — remove ultra-zoom, keep images fixed and fully fitted */
.site-header{position:fixed;top:0;opacity:0;transform:translateY(-18px);pointer-events:none;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}.site-header.is-visible{opacity:1;transform:none;pointer-events:auto}
.brand-intro{--intro-progress:0;min-height:100svh;background:#050606;color:#fff;position:relative;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.prism-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.brand-intro:before,.brand-intro:after{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none}.brand-intro:before{background:radial-gradient(ellipse at 45% 48%,rgba(18,129,143,.42),transparent 27%),radial-gradient(ellipse at 70% 56%,rgba(240,68,46,.2),transparent 24%);filter:blur(22px);animation:water-glow 9s ease-in-out infinite}.brand-intro:after{background:repeating-radial-gradient(ellipse at 50% 58%,transparent 0 21px,rgba(123,234,244,.11) 22px 24px,transparent 25px 42px);opacity:.7;transform:perspective(500px) rotateX(64deg) scale(1.5) translateY(20%);animation:water-ripple 8s ease-in-out infinite}
.water-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(101,218,229,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(101,218,229,.12) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse at center,black,transparent 72%);opacity:.55;z-index:-1;transform:perspective(600px) rotateX(58deg) scale(1.5) translateY(19%)}
.brand-watermark{position:absolute;font:900 clamp(12rem,31vw,34rem)/.7 'Barlow Condensed',sans-serif;letter-spacing:-.08em;color:rgba(255,255,255,.025);white-space:nowrap;animation:watermark-float 12s ease-in-out infinite;user-select:none}
.intro-logo{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));animation:intro-rise 1.3s cubic-bezier(.2,.8,.2,1) both;translate:0 calc(var(--intro-progress) * -14vh);scale:calc(1 - var(--intro-progress) * .16);opacity:calc(1 - var(--intro-progress) * 1.25)}
.intro-logo-main{font:900 clamp(3.6rem,12vw,12rem)/.78 'Barlow Condensed',sans-serif;letter-spacing:-.055em;color:transparent;background:linear-gradient(180deg,#fff 0%,#e7ffff 43%,#67ced9 55%,#fff 66%,#c4f6fb 100%);background-size:100% 240%;background-clip:text;-webkit-background-clip:text;animation:water-text 6s ease-in-out infinite}
.intro-logo-tagline{margin-top:22px;padding:9px clamp(18px,4vw,60px);background:#e52d22;color:#090909;font:900 clamp(.82rem,2.1vw,2rem)/1 'Manrope',sans-serif;letter-spacing:.42em;text-indent:.42em;animation:tagline-wave 5s ease-in-out infinite}
.intro-scroll{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);color:#d7f4f6;text-decoration:none;text-transform:uppercase;font-size:.65rem;font-weight:800;letter-spacing:.2em}.intro-scroll span{color:var(--red);font-size:1.2rem;margin-left:9px;animation:scroll-bob 1.6s ease-in-out infinite}
.intro-hud,.intro-index{position:absolute;z-index:3;font:700 .6rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.14em;color:rgba(225,249,250,.66);text-transform:uppercase}.intro-hud{display:flex;gap:10px;align-items:center}.intro-hud i{display:block;width:42px;height:1px;background:var(--red)}.hud-left{left:5.5vw;bottom:10vh;flex-direction:column;align-items:flex-start;gap:3px}.hud-right{right:5.5vw;top:18vh;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}.hud-right strong{color:var(--red);font-size:1rem;animation:pulse-dot 1.8s infinite}.intro-index{right:5.5vw;bottom:8vh;display:flex;flex-direction:column;align-items:flex-end;color:rgba(255,255,255,.38)}.intro-index b{font-size:.72rem;color:#fff;line-height:1.25;margin:7px 0;text-align:right}
@keyframes water-glow{50%{transform:translate(5%,-3%) scale(1.12);filter:blur(34px)}}@keyframes water-ripple{50%{transform:perspective(500px) rotateX(64deg) scale(1.65) translateY(15%);opacity:.35}}@keyframes watermark-float{50%{transform:translateY(-18px) scale(1.02)}}@keyframes intro-rise{from{opacity:0;transform:translateY(36px) scale(.96)}to{opacity:1;transform:none}}@keyframes water-text{50%{background-position:0 100%}}@keyframes tagline-wave{50%{transform:translateY(-5px) skewX(-3deg)}}@keyframes scroll-bob{50%{transform:translateY(7px)}}
.hero{min-height:100svh}
.hero-slider{position:absolute;inset:0;overflow:hidden;z-index:0;background:#202020}
.hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;opacity:0;transform:scale(.9) translateY(6%);filter:brightness(.7) saturate(.8);transition:opacity .85s ease,transform 1.25s cubic-bezier(.16,1,.3,1),filter 1.1s ease;will-change:opacity,transform;border:0;padding:0;margin:0}
.hero.is-in-view .hero-slide.active{opacity:1;transform:scale(1) translateY(0);filter:brightness(1) saturate(1)}
.slider-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,16,16,.96) 0%,rgba(16,16,16,.84) 35%,rgba(16,16,16,.28) 62%,rgba(16,16,16,.2) 100%);pointer-events:none;z-index:1}
.slider-status{position:absolute;right:5.5vw;bottom:27px;display:flex;align-items:center;gap:10px;color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.14em;z-index:1}
.slider-status i{display:block;width:34px;height:1px;background:var(--red)}
.hero.is-in-view .slider-status{animation:status-pop .7s .35s both}@keyframes status-pop{from{opacity:0;transform:translateY(16px) scale(.85)}to{opacity:1;transform:none}}
.hero-pulse{position:absolute;top:38%;right:9%;display:flex;gap:7px;align-items:center;z-index:2}.hero-pulse span{display:block;width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(240,68,46,.7);animation:pulse-dot 2s infinite}.hero-pulse span:nth-child(2){animation-delay:.3s}.hero-pulse span:nth-child(3){animation-delay:.6s}
.hero-wordmark{position:absolute;right:3.5vw;top:50%;color:rgba(255,255,255,.28);font:800 clamp(.55rem,.8vw,.75rem)/1.35 'Barlow Condensed',sans-serif;letter-spacing:.22em;text-align:right;z-index:2;animation:wordmark-shift 7s ease-in-out infinite}
@keyframes pulse-dot{50%{box-shadow:0 0 0 9px rgba(240,68,46,0)}}@keyframes wordmark-shift{50%{transform:translateY(-14px);opacity:.5}}
.gallery-tile{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}.gallery-tile:hover{transform:translateY(-7px);box-shadow:0 18px 28px rgba(0,0,0,.18)}
@media(max-width:720px){.intro-logo-main{font-size:clamp(3.3rem,14vw,5.8rem)}.intro-logo-tagline{letter-spacing:.25em;text-indent:.25em;margin-top:14px}.intro-hud{display:none}.intro-index{right:7vw;bottom:10vh;font-size:.5rem}.hero{min-height:100svh}.hero-slider{inset:0}.slider-shade{background:linear-gradient(180deg,rgba(16,16,16,.84),rgba(16,16,16,.54) 55%,rgba(16,16,16,.34))}.slider-status{right:7vw;bottom:24px}.hero-wordmark{right:7vw;top:22%}}
@media(prefers-reduced-motion:reduce){.brand-intro:before,.brand-intro:after,.brand-watermark,.intro-logo,.intro-logo-main,.intro-logo-tagline,.intro-scroll span,.hero-pulse span,.hero-wordmark{animation:none}.gallery-tile,.gallery-tile:hover{transition:none;transform:none}}

/* 3D background for sections 3+ (from #about onward) */
.sections-3d-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility .8s ease}
/* Show the 3D canvas once the user scrolls past the hero into #about and below */
.sections-3d-canvas.is-active{opacity:1;visibility:visible}
/* Ensure main content sits above the 3D canvas */
main{position:relative;z-index:1}
/* Give light/paper sections a translucent backdrop so the 3D effect shows through tastefully */
.statement,.services,.featured,.gallery-preview{background:rgba(244,241,235,0.82);backdrop-filter:blur(2px)}
.numbers,.contact{background:rgba(11,11,11,0.88)}
@media(max-width:720px){.statement,.services,.featured,.gallery-preview{background:rgba(244,241,235,0.9)}}