/**
 * UMEED — ULTRA PREMIUM v4
 * ========================
 * FIXES: Gallery .reveal.in · Logo slow glow · Performance
 */

:root {
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.22, 0.64, 1);
  --ease-cin:    cubic-bezier(0.76, 0, 0.24, 1);
  --dur-xs: 200ms; --dur-sm: 340ms; --dur-md: 640ms; --dur-lg: 940ms;
}

html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

/* ── GRAIN TEXTURE ─────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 9000; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 180px 180px; opacity: 0.028; mix-blend-mode: overlay;
}

/* ── SCROLLBAR ─────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#E3C26F,#B10515); border-radius: 99px; }

/* ── GRADIENT HEADINGS ─────────────────── */
.sectionTitle h3, .sectionTitle h2 {
  background: linear-gradient(118deg,#F5DFA0 0%,#E3C26F 38%,#fff 58%,#E3C26F 78%,#F5DFA0 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 5s linear infinite;
}
#ceo h2 {
  background: linear-gradient(118deg,#F5DFA0,#E3C26F,#fff,#E3C26F);
  background-size: 200% auto;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 4s linear infinite;
}
@keyframes textShimmer {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* ── HERO ──────────────────────────────── */
.hero-content { display: none !important; }

.hero-slider::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(7,9,13,.80) 0%, rgba(7,9,13,.12) 40%, transparent 65%),
    linear-gradient(to right, rgba(7,9,13,.22) 0%, transparent 50%);
}

.hero-brand-strip {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  padding: clamp(18px,4vw,42px) clamp(18px,5vw,60px);
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.hero-brand-name {
  font-family: var(--font-head); font-size: clamp(13px,1.6vw,18px);
  font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: #E3C26F;
  opacity: 0; transform: translateY(12px);
  animation: stripIn .8s var(--ease-out) .6s forwards;
}
.hero-brand-tag {
  font-size: clamp(11px,1.1vw,13px); letter-spacing: .18em;
  text-transform: uppercase; color: rgba(255,255,255,.60);
  opacity: 0; transform: translateY(10px);
  animation: stripIn .8s var(--ease-out) .8s forwards;
}
.hero-brand-line {
  width: 0; height: 1.5px;
  background: linear-gradient(90deg,#E3C26F,transparent);
  margin-bottom: 10px;
  animation: lineGrow .9s var(--ease-out) .4s forwards;
}
@keyframes stripIn { to { opacity: 1; transform: translateY(0); } }
@keyframes lineGrow { to { width: min(220px,35vw); } }

.hero-slide.active img { animation: kenBurns 9s var(--ease-cin) forwards; }
@keyframes kenBurns {
  from { transform: scale(1.08) translateX(0); }
  to   { transform: scale(1.00) translateX(-10px); }
}
.hero-slide { transition: opacity 1.4s ease !important; }

/* ── INTRO LOGO — SLOW 3D SPIN + RICH GLOW ── */


/* Pulsing glow at the very end */
@keyframes logoGlowPulse {
  0%,100% { filter: blur(0) drop-shadow(0 0 40px rgba(227,194,111,0.45)); }
  50%      { filter: blur(0) drop-shadow(0 0 80px rgba(227,194,111,0.90)) drop-shadow(0 0 120px rgba(227,194,111,0.4)); }
}

#intro .logo {
  animation:
    logoIn 4.8s var(--ease-out) forwards,
    logoGlowPulse 1.4s ease-in-out 4.8s 2 !important;
}

/* Gold halo ring */
#intro .logo::before {
  content: ''; position: absolute; inset: -30%; border-radius: 50%;
  background: radial-gradient(circle, rgba(227,194,111,.45) 0%, rgba(227,194,111,.12) 45%, transparent 70%);
  animation: haloGrow 4.8s ease forwards; opacity: 0;
}
@keyframes haloGrow {
  0%   { opacity: 0; transform: scale(0.4); }
  25%  { opacity: 0.8; transform: scale(1.1); }
  55%  { opacity: 1.0; transform: scale(1.2); }
  75%  { opacity: 0.9; transform: scale(1.05); }
  88%  { opacity: 1.0; transform: scale(1.15); }
  100% { opacity: 0.6; transform: scale(1.0); }
}
  30%  { opacity: 1; transform: scale(1.2); }
  60%  { opacity: 0.8; transform: scale(1.05); }
  100% { opacity: 0.65; transform: scale(1.0); }
}

/* Intro sweeps */
#intro .sweep {
  animation: sweep 4.0s var(--ease-out) .8s forwards !important;
}

/* Website preview reveal after logo */
body.intro-on main { opacity: 0; transform: translateY(12px) scale(.99); }
body.intro-done main {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out) !important;
}

/* Intro fade-out: slower, more beautiful */
#intro.out {
  animation: introOut 1.0s var(--ease-cin) forwards !important;
}
@keyframes introOut {
  0%   { opacity: 1; transform: scale(1); }
  40%  { opacity: 0.6; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1.03); pointer-events: none; }
}

/* ── SCROLL REVEAL ─────────────────────── */
.reveal {
  opacity: 0 !important;
  transform: translateY(26px) !important;
  transition:
    opacity  var(--dur-md) var(--ease-out),
    transform var(--dur-md) var(--ease-out) !important;
}

/* ▼ CRITICAL FIX: media.js adds .in, our JS adds .reveal-in — handle BOTH */
.reveal.reveal-in,
.reveal.in {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger */
.grid .reveal:nth-child(1) { transition-delay:   0ms; }
.grid .reveal:nth-child(2) { transition-delay:  80ms; }
.grid .reveal:nth-child(3) { transition-delay: 160ms; }
.grid .reveal:nth-child(4) { transition-delay: 240ms; }
.grid .reveal:nth-child(5) { transition-delay: 320ms; }
.grid .reveal:nth-child(6) { transition-delay: 400ms; }

/* Word-split */
.word-split-wrap { overflow: hidden; display: inline; }
.word-split {
  display: inline-block; opacity: 0; transform: translateY(100%);
  transition: opacity var(--dur-md) var(--ease-out), transform var(--dur-md) var(--ease-out);
}
.word-split.word-in { opacity: 1; transform: translateY(0); }

/* ── CARDS ─────────────────────────────── */
.card {
  position: relative; will-change: transform;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition:
    transform var(--dur-sm) var(--ease-spring),
    box-shadow var(--dur-sm) var(--ease-spring) !important;
}
.card:hover {
  transform: translateY(-9px) scale(1.016) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,.22), 0 0 0 1px rgba(227,194,111,.18) !important;
}
.card:active { transform: translateY(-2px) scale(1.004) !important; }

/* Spinning border on hover */
.card::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0deg,rgba(227,194,111,0) 60deg,
    rgba(227,194,111,.8) 120deg,rgba(255,255,255,.5) 150deg,
    rgba(227,194,111,.8) 180deg,rgba(227,194,111,0) 240deg,transparent 360deg);
  opacity: 0; transition: opacity var(--dur-sm) ease; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: destination-out; mask-composite: exclude; padding: 1px;
}
.card:hover::before { opacity: 1; animation: borderSpin 2s linear infinite; }
@keyframes borderSpin { to { transform: rotate(360deg); } }

.card .icon { position: relative; transition: transform var(--dur-sm) var(--ease-spring) !important; }
.card:hover .icon { transform: scale(1.12) translateY(-2px) !important; filter: drop-shadow(0 0 12px rgba(227,194,111,.65)); }

.notice-card {
  will-change: transform;
  transition: transform var(--dur-sm) var(--ease-spring), box-shadow var(--dur-sm) var(--ease-spring) !important;
}
.notice-card:hover { transform: translateY(-7px) !important; box-shadow: 0 18px 40px rgba(0,0,0,.2) !important; }

.ceo-card-dark {
  will-change: transform;
  transition: transform var(--dur-md) var(--ease-spring), box-shadow var(--dur-md) var(--ease-spring) !important;
}
.ceo-card-dark:hover {
  transform: translateY(-11px) scale(1.012) !important;
  box-shadow: 0 28px 60px rgba(0,0,0,.26), 0 0 0 1px rgba(227,194,111,.22) !important;
}

/* ── BUTTONS ───────────────────────────── */
.btn, button, a.login-btn {
  transition:
    transform var(--dur-sm) var(--ease-spring), box-shadow var(--dur-sm) ease,
    background-color var(--dur-sm) ease, border-color var(--dur-sm) ease !important;
  will-change: transform;
}
.btn:hover { transform: translateY(-3px) !important; }
.btn:active { transform: translateY(0) scale(0.97) !important; }

/* ── PAGE VEIL ─────────────────────────── */
.page-veil {
  position: fixed; inset: 0; z-index: 5000; background: #07090D;
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease-cin);
}
.page-veil.veil-in  { opacity: 1; pointer-events: all; }
.page-veil.veil-out { opacity: 0; pointer-events: none; }

/* ── ACTIVE NAV ────────────────────────── */
.menu a.nav-active { position: relative; color: #E3C26F !important; }
.menu a.nav-active::after {
  content: ''; position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: #E3C26F;
}

/* ── SECTION GLOW ──────────────────────── */
.sectionGlow {
  background: radial-gradient(ellipse 70% 40% at 50% 0%,rgba(227,194,111,.055) 0%,transparent 70%);
  opacity: 0; transition: opacity 700ms ease;
}
.section:hover .sectionGlow { opacity: 1; }

/* ── BELL ──────────────────────────────── */
.notice-bell { animation: bellIdle 3.2s ease-in-out infinite !important; }
@keyframes bellIdle {
  0%,100% { transform: rotate(0); } 18% { transform: rotate(5deg); }
  38% { transform: rotate(-4deg); } 58% { transform: rotate(2.5deg); } 78% { transform: rotate(-1.5deg); }
}
.notice-bell:hover { animation: bellRing .55s var(--ease-spring) forwards !important; }
@keyframes bellRing {
  0%  { transform: rotate(0) scale(1); } 18% { transform: rotate(22deg) scale(1.08); }
  42% { transform: rotate(-20deg) scale(1.08); } 62% { transform: rotate(12deg) scale(1.04); }
  78% { transform: rotate(-7deg) scale(1.02); } 100% { transform: rotate(0) scale(1); }
}

/* ── BLOB ──────────────────────────────── */
.blob { animation: blobFloat 14s ease-in-out infinite !important; }
@keyframes blobFloat {
  0%,100% { transform: translate3d(-45%,35%,0) scale(1); }
  30%      { transform: translate3d(-42%,38%,0) scale(1.05); }
  65%      { transform: translate3d(-48%,30%,0) scale(0.97); }
}

/* ── FOOTER ────────────────────────────── */
.footer { opacity: 0; transform: translateY(24px); }
.footer.footer-in {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--dur-lg) var(--ease-out), transform var(--dur-lg) var(--ease-out);
}

/* ── ALBUM CARDS fix: never animate-lock inside hidden container ── */
#galleryAlbums .reveal {
  transition-delay: 0ms !important;
}

/* ── MOBILE ────────────────────────────── */
@media (max-width: 768px) {
  .card:hover, .ceo-card-dark:hover { transform: translateY(-5px) !important; box-shadow: 0 12px 28px rgba(0,0,0,.16) !important; }
  .card:hover::before { animation: none !important; opacity: 0 !important; }
  .reveal { transition-duration: 440ms !important; transform: translateY(18px) !important; }
  .grid .reveal:nth-child(n) { transition-delay: 0ms !important; }
  .blob { animation-duration: 20s !important; }
  @keyframes kenBurns { from { transform: scale(1.04); } to { transform: scale(1.00); } }
}
@media (max-width: 480px) {
  .card:hover { transform: translateY(-4px) !important; }
  .reveal     { transform: translateY(14px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .footer { opacity: 1 !important; transform: none !important; }
}

/* ── GALLERY ALBUM CARD FIX ──────────── */
/* albumCard needs aspect-ratio so the image has space to fill */
.albumCard {
  aspect-ratio: 4 / 3 !important;
  min-height: 180px;
  display: block !important;
}

.albumCard img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ensure album modal media items are visible */
#albumModal .media.reveal,
#albumModal .media.reveal-in {
  opacity: 1 !important;
  transform: none !important;
}

/* Album cards in grid should never be opacity:0 after reveal-in */
.albumCard.reveal-in {
  opacity: 1 !important;
  transform: none !important;
}

@keyframes logoIn {
  0% {
    opacity: 0;
    transform: perspective(900px) rotateY(-220deg) scale(0.45);
    filter: blur(22px) drop-shadow(0 0 0 rgba(227,194,111,0));
  }
  20% {
    opacity: 0.6;
    filter: blur(10px) drop-shadow(0 0 20px rgba(227,194,111,0.25));
  }
  45% {
    opacity: 1;
    transform: perspective(900px) rotateY(18deg) scale(1.06);
    filter: blur(0px) drop-shadow(0 0 60px rgba(227,194,111,0.80));
  }
  58% {
    transform: perspective(900px) rotateY(-8deg) scale(1.01);
    filter: blur(0px) drop-shadow(0 0 80px rgba(227,194,111,1.0));
  }
  70% {
    transform: perspective(900px) rotateY(4deg) scale(1.02);
    filter: blur(0px) drop-shadow(0 0 55px rgba(227,194,111,0.70));
  }
  82% {
    transform: perspective(900px) rotateY(0deg) scale(1.0);
    filter: blur(0px) drop-shadow(0 0 45px rgba(227,194,111,0.55));
  }
  90% {
    filter: blur(0px) drop-shadow(0 0 70px rgba(227,194,111,0.85));
  }
  95% {
    filter: blur(0px) drop-shadow(0 0 30px rgba(227,194,111,0.40));
  }
  100% {
    opacity: 1;
    transform: perspective(900px) rotateY(0deg) scale(1);
    filter: blur(0) drop-shadow(0 0 40px rgba(227,194,111,0.35));
  }
}

/* ══════════════════════════════════════════
   INTRO LOGO — SLOW 3D SPIN WITH GOLD GLOW
   Overrides logoInPro from styles.css
   Duration: 4.6s total | Glow pulse after settle
   ══════════════════════════════════════════ */

/* Dark radial background for more drama */
#intro {
  background: radial-gradient(
    ellipse 80% 60% at 50% 42%,
    rgba(227,194,111,.10) 0%,
    rgba(0,0,0,.88) 55%,
    #000 100%
  ) !important;
}

/* ─ New slow premium logo animation ─ */
@keyframes logoInPro {
  0% {
    opacity: 0;
    transform: perspective(900px) rotateY(-210deg) scale(0.45);
    filter: blur(22px) drop-shadow(0 0 0 rgba(227,194,111,0));
  }
  18% {
    opacity: 0.6;
    filter: blur(12px) drop-shadow(0 0 20px rgba(227,194,111,0.28));
  }
  46% {
    transform: perspective(900px) rotateY(16deg) scale(1.08);
    filter: blur(1px) drop-shadow(0 0 64px rgba(227,194,111,0.75));
  }
  60% {
    transform: perspective(900px) rotateY(-8deg) scale(1.02);
    filter: blur(0) drop-shadow(0 0 55px rgba(227,194,111,0.60));
  }
  72% {
    transform: perspective(900px) rotateY(4deg) scale(1.01);
    filter: blur(0) drop-shadow(0 0 50px rgba(227,194,111,0.55));
  }
  84% {
    transform: perspective(900px) rotateY(0deg) scale(1);
    filter: blur(0) drop-shadow(0 0 48px rgba(227,194,111,0.50));
  }
  100% {
    opacity: 1;
    transform: perspective(900px) rotateY(0) scale(1);
    filter: blur(0) drop-shadow(0 0 36px rgba(227,194,111,0.38));
  }
}

#intro .logo {
  animation: logoInPro 4.6s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  position: relative;
}

/* Gold halo ring expands behind logo */
#intro .logo::before {
  content: '';
  position: absolute;
  inset: -32%;
  background: radial-gradient(circle,
    rgba(227,194,111,0.42) 0%,
    rgba(227,194,111,0.12) 40%,
    transparent 68%
  );
  border-radius: 50%;
  animation: haloExpand 4.6s ease forwards;
  opacity: 0;
  pointer-events: none;
}

@keyframes haloExpand {
  0%  { opacity: 0; transform: scale(0.3); }
  30% { opacity: 0.9; transform: scale(1.2); }
  70% { opacity: 0.7; transform: scale(1.0); }
  84% { opacity: 1; transform: scale(1.05); }
  100%{ opacity: 0.6; transform: scale(1.0); }
}

/* Outer pulse ring — fires at end of spin */
#intro .logo::after {
  content: '';
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  border: 1.5px solid rgba(227,194,111,0.45);
  opacity: 0;
  transform: scale(0.6);
  animation: ringPulse 1.6s ease-out 3.8s forwards;
  pointer-events: none;
}

@keyframes ringPulse {
  0%   { opacity: 0; transform: scale(0.7); }
  35%  { opacity: 0.85; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(1.45); }
}

/* Slow, graceful exit — page reveals beneath */
#intro.out {
  animation: introVeil 1.4s cubic-bezier(0.76, 0, 0.24, 1) forwards !important;
}

@keyframes introVeil {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.03); pointer-events: none; }
}

/* Website slides up AFTER intro exits */
body.intro-done main {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ── GALLERY ALBUM CARD HEIGHT FIX ─────── */
/* Without explicit height, img{height:100%} collapses to 0 */
.albumCard {
  min-height: 200px !important;
  aspect-ratio: 4 / 3;
  display: block;
}

.albumCard img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ensure album modal grid images also show properly */
#albumModal .media {
  min-height: 160px !important;
  aspect-ratio: 4 / 3;
}