/* ============================
   FONTS
============================ */
@font-face {
  font-family: "SuisseIntl";
  font-weight: 300;
  src: url(fonts/SuisseIntl/SuisseIntl-Ultralight.otf) format("opentype");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 400;
  src: url(fonts/SuisseIntl/SuisseIntl-Thin.otf) format("opentype");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 500;
  src: url(fonts/SuisseIntl/SuisseIntl-Light.otf) format("opentype");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 600;
  src: url(fonts/SuisseIntl/SuisseIntl-Regular.otf) format("opentype");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 700;
  src: url(fonts/SuisseIntl/SuisseIntl-SemiBold.otf) format("opentype");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 800;
  src: url(fonts/SuisseIntl/SuisseIntl-Bold.otf) format("opentype");
}

@font-face {
  font-family: "SuisseIntl";
  font-weight: 900;
  src: url(fonts/SuisseIntl/SuisseIntl-Black.otf) format("opentype");
}


/* ============================
   CSS VARIABLES
============================ */
:root {
  --gold: #FFCE99;
  --gold-light: #FFCE99;
  --gold-dark: #562F00;
  --gold-glow: rgba(255, 206, 153, 0.25);
  --white: #FFFDF1;
  --off-white: #FFFDF1;
  --light-gray: #FFCE99;
  --mid-gray: #FFCE99;
  --text-dark: #562F00;
  --text-body: #562F00;
  --text-muted: #FFCE99;
  --font: 'SuisseIntl', 'Segoe UI', sans-serif;
  --font-title: 'comba', sans-serif;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 50px;
}


/* ============================
   GLOBAL
============================ */
html {
  scroll-behavior: smooth;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #FFFDF1;

  color: var(--text-dark);
  font-family: var(--font);
  min-height: 100vh;
  overflow-x: hidden;
  cursor: url('../import/mouse.png'), auto;
}

a {
  color: var(--gold-dark);
  text-decoration: none;
  cursor: pointer;
}

a:hover {
  color: #FFCE99;
  cursor: url('../import/mouse2.png'), pointer;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.clickable:hover,
select:hover {
  cursor: url('../import/mouse2.png'), pointer;
  background-color: #FFCE99;
}

/* Click state */
body:active,
a:active,
button:active,
input:active,
select:active,
.clickable:active {
  cursor: url('../import/mouse3.png'), auto;
}

::selection {
  background: #FFCE99;
  color: #FFFDF1;
}


/* ============================
   LOGIN OVERLAY
============================ */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #FFFDF1;
  background-image: url('../import/leopard2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.login-overlay.dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.login-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 520px;
  height: 520px;
}

.login-glow {
  position: absolute;
  inset: -60px;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.85) 25%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0.2) 70%,
      rgba(255, 255, 255, 0) 100%);
}

.login-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.login-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 5rem);
  color: #562F00;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}



.login-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.login-input {
  width: 280px;
  padding: 0.9rem 1.4rem;
  background: #FFFDF1;
  border: 1.5px solid #562F00;
  border-radius: var(--radius-md);
  color: #562F00;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-align: center;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.login-input::placeholder {
  color: #562F00;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.login-input:focus {
  border-color: #FFCE99;
  box-shadow: 0 0 0 4px rgba(255, 206, 153, 0.15);
}

.login-btn {
  padding: 0.8rem 3rem;
  background-color: #562F00;
  border: 2px solid #562F00;
  border-radius: var(--radius-pill);
  color: #FFFDF1;
  font-family: var(--font);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: url('../import/mouse2.png'), pointer;
  transition: all 0.4s ease;
  box-shadow: 0 4px 15px rgba(86, 47, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.login-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  border-radius: inherit;
  transition: background 0.4s ease;
}

.login-btn:hover::before {
  background: transparent;
}

.login-btn span,
.login-btn {
  position: relative;
  z-index: 1;
}

.login-btn:hover {
  background-color: #FFCE99;
  color: #562F00;
  border-color: #562F00;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(86, 47, 0, 0.3);
}

.login-error {
  color: #562F00;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  min-height: 1.2rem;
  margin-top: 0.5rem;
}

/* Shake animation */
@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(8px);
  }

  60% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(5px);
  }
}

.login-input.shake {
  animation: shake 0.4s ease;
  border-color: #FFCE99;
}

/* Sparkle particles */
.login-sparkles,
.gallery-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.login-sparkles span,
.gallery-sparkles span {
  position: absolute;
  background: #FFCE99;
  opacity: 0;
  clip-path: polygon(50% 0%, 61% 35%, 100% 50%, 61% 65%,
      50% 100%, 39% 65%, 0% 50%, 39% 35%);
}

.login-sparkles span:nth-child(1),
.gallery-sparkles span:nth-child(1) {
  left: 8%;
  top: 12%;
  width: 14px;
  height: 14px;
  animation: pop 1.8s ease-in-out 0s infinite;
}

.login-sparkles span:nth-child(2),
.gallery-sparkles span:nth-child(2) {
  left: 88%;
  top: 18%;
  width: 18px;
  height: 18px;
  animation: pop 2.2s ease-in-out 0.15s infinite;
}

.login-sparkles span:nth-child(3),
.gallery-sparkles span:nth-child(3) {
  left: 42%;
  top: 82%;
  width: 12px;
  height: 12px;
  animation: pop 1.5s ease-in-out 0.35s infinite;
}

.login-sparkles span:nth-child(4),
.gallery-sparkles span:nth-child(4) {
  left: 74%;
  top: 52%;
  width: 10px;
  height: 10px;
  animation: pop 2.0s ease-in-out 0.55s infinite;
}

.login-sparkles span:nth-child(5),
.gallery-sparkles span:nth-child(5) {
  left: 18%;
  top: 42%;
  width: 16px;
  height: 16px;
  animation: pop 1.7s ease-in-out 0.25s infinite;
}

.login-sparkles span:nth-child(6),
.gallery-sparkles span:nth-child(6) {
  left: 62%;
  top: 8%;
  width: 11px;
  height: 11px;
  animation: pop 2.1s ease-in-out 0.7s infinite;
}

.login-sparkles span:nth-child(7),
.gallery-sparkles span:nth-child(7) {
  left: 33%;
  top: 32%;
  width: 15px;
  height: 15px;
  animation: pop 1.6s ease-in-out 0.9s infinite;
}

.login-sparkles span:nth-child(8),
.gallery-sparkles span:nth-child(8) {
  left: 92%;
  top: 68%;
  width: 10px;
  height: 10px;
  animation: pop 2.4s ease-in-out 0.45s infinite;
}

.login-sparkles span:nth-child(9),
.gallery-sparkles span:nth-child(9) {
  left: 3%;
  top: 62%;
  width: 13px;
  height: 13px;
  animation: pop 1.9s ease-in-out 1.1s infinite;
}

.login-sparkles span:nth-child(10),
.gallery-sparkles span:nth-child(10) {
  left: 52%;
  top: 3%;
  width: 17px;
  height: 17px;
  animation: pop 2.0s ease-in-out 0.1s infinite;
}

.login-sparkles span:nth-child(11),
.gallery-sparkles span:nth-child(11) {
  left: 80%;
  top: 90%;
  width: 12px;
  height: 12px;
  animation: pop 1.4s ease-in-out 0.65s infinite;
}

.login-sparkles span:nth-child(12),
.gallery-sparkles span:nth-child(12) {
  left: 28%;
  top: 92%;
  width: 14px;
  height: 14px;
  animation: pop 2.3s ease-in-out 1.0s infinite;
}

.login-sparkles span:nth-child(13),
.gallery-sparkles span:nth-child(13) {
  left: 58%;
  top: 40%;
  width: 9px;
  height: 9px;
  animation: pop 1.6s ease-in-out 0.8s infinite;
}

.login-sparkles span:nth-child(14),
.gallery-sparkles span:nth-child(14) {
  left: 12%;
  top: 85%;
  width: 16px;
  height: 16px;
  animation: pop 2.1s ease-in-out 1.3s infinite;
}

.login-sparkles span:nth-child(15),
.gallery-sparkles span:nth-child(15) {
  left: 95%;
  top: 38%;
  width: 13px;
  height: 13px;
  animation: pop 1.8s ease-in-out 0.12s infinite;
}

.login-sparkles span:nth-child(16),
.gallery-sparkles span:nth-child(16) {
  left: 40%;
  top: 15%;
  width: 11px;
  height: 11px;
  animation: pop 1.5s ease-in-out 0.5s infinite;
}

.login-sparkles span:nth-child(17),
.gallery-sparkles span:nth-child(17) {
  left: 70%;
  top: 28%;
  width: 15px;
  height: 15px;
  animation: pop 2.0s ease-in-out 0.3s infinite;
}

.login-sparkles span:nth-child(18),
.gallery-sparkles span:nth-child(18) {
  left: 22%;
  top: 72%;
  width: 10px;
  height: 10px;
  animation: pop 1.7s ease-in-out 1.5s infinite;
}

.login-sparkles span:nth-child(19),
.gallery-sparkles span:nth-child(19) {
  left: 85%;
  top: 5%;
  width: 12px;
  height: 12px;
  animation: pop 2.2s ease-in-out 0.4s infinite;
}

.login-sparkles span:nth-child(20),
.gallery-sparkles span:nth-child(20) {
  left: 48%;
  top: 58%;
  width: 14px;
  height: 14px;
  animation: pop 1.9s ease-in-out 0.75s infinite;
}

.login-sparkles span:nth-child(21),
.gallery-sparkles span:nth-child(21) {
  left: 6%;
  top: 30%;
  width: 9px;
  height: 9px;
  animation: pop 1.4s ease-in-out 1.2s infinite;
}

.login-sparkles span:nth-child(22),
.gallery-sparkles span:nth-child(22) {
  left: 65%;
  top: 75%;
  width: 17px;
  height: 17px;
  animation: pop 2.3s ease-in-out 0.2s infinite;
}

.login-sparkles span:nth-child(23),
.gallery-sparkles span:nth-child(23) {
  left: 38%;
  top: 50%;
  width: 11px;
  height: 11px;
  animation: pop 1.6s ease-in-out 0.95s infinite;
}

.login-sparkles span:nth-child(24),
.gallery-sparkles span:nth-child(24) {
  left: 82%;
  top: 45%;
  width: 13px;
  height: 13px;
  animation: pop 2.1s ease-in-out 0.6s infinite;
}

.login-sparkles span:nth-child(25),
.gallery-sparkles span:nth-child(25) {
  left: 15%;
  top: 55%;
  width: 15px;
  height: 15px;
  animation: pop 1.8s ease-in-out 1.4s infinite;
}

.login-sparkles span:nth-child(26),
.gallery-sparkles span:nth-child(26) {
  left: 55%;
  top: 22%;
  width: 10px;
  height: 10px;
  animation: pop 1.5s ease-in-out 0.85s infinite;
}

.login-sparkles span:nth-child(27),
.gallery-sparkles span:nth-child(27) {
  left: 75%;
  top: 95%;
  width: 12px;
  height: 12px;
  animation: pop 2.0s ease-in-out 0.05s infinite;
}

.login-sparkles span:nth-child(28),
.gallery-sparkles span:nth-child(28) {
  left: 25%;
  top: 8%;
  width: 16px;
  height: 16px;
  animation: pop 1.7s ease-in-out 1.15s infinite;
}

.login-sparkles span:nth-child(29),
.gallery-sparkles span:nth-child(29) {
  left: 46%;
  top: 68%;
  width: 9px;
  height: 9px;
  animation: pop 2.4s ease-in-out 0.38s infinite;
}

.login-sparkles span:nth-child(30),
.gallery-sparkles span:nth-child(30) {
  left: 90%;
  top: 15%;
  width: 14px;
  height: 14px;
  animation: pop 1.6s ease-in-out 0.58s infinite;
}

.login-sparkles span:nth-child(31),
.gallery-sparkles span:nth-child(31) {
  left: 2%;
  top: 5%;
  width: 11px;
  height: 11px;
  animation: pop 1.9s ease-in-out 0.22s infinite;
}

.login-sparkles span:nth-child(32),
.gallery-sparkles span:nth-child(32) {
  left: 97%;
  top: 50%;
  width: 13px;
  height: 13px;
  animation: pop 1.5s ease-in-out 0.72s infinite;
}

.login-sparkles span:nth-child(33),
.gallery-sparkles span:nth-child(33) {
  left: 36%;
  top: 95%;
  width: 15px;
  height: 15px;
  animation: pop 2.1s ease-in-out 1.05s infinite;
}

.login-sparkles span:nth-child(34),
.gallery-sparkles span:nth-child(34) {
  left: 68%;
  top: 10%;
  width: 10px;
  height: 10px;
  animation: pop 1.7s ease-in-out 0.48s infinite;
}

.login-sparkles span:nth-child(35),
.gallery-sparkles span:nth-child(35) {
  left: 14%;
  top: 38%;
  width: 12px;
  height: 12px;
  animation: pop 2.3s ease-in-out 0.18s infinite;
}

.login-sparkles span:nth-child(36),
.gallery-sparkles span:nth-child(36) {
  left: 78%;
  top: 62%;
  width: 16px;
  height: 16px;
  animation: pop 1.4s ease-in-out 0.88s infinite;
}

.login-sparkles span:nth-child(37),
.gallery-sparkles span:nth-child(37) {
  left: 50%;
  top: 25%;
  width: 9px;
  height: 9px;
  animation: pop 2.0s ease-in-out 1.35s infinite;
}

.login-sparkles span:nth-child(38),
.gallery-sparkles span:nth-child(38) {
  left: 30%;
  top: 48%;
  width: 14px;
  height: 14px;
  animation: pop 1.8s ease-in-out 0.62s infinite;
}

.login-sparkles span:nth-child(39),
.gallery-sparkles span:nth-child(39) {
  left: 86%;
  top: 82%;
  width: 11px;
  height: 11px;
  animation: pop 1.6s ease-in-out 0.32s infinite;
}

.login-sparkles span:nth-child(40),
.gallery-sparkles span:nth-child(40) {
  left: 10%;
  top: 75%;
  width: 17px;
  height: 17px;
  animation: pop 2.2s ease-in-out 1.18s infinite;
}

.login-sparkles span:nth-child(41),
.gallery-sparkles span:nth-child(41) {
  left: 44%;
  top: 6%;
  width: 13px;
  height: 13px;
  animation: pop 1.5s ease-in-out 0.08s infinite;
}

.login-sparkles span:nth-child(42),
.gallery-sparkles span:nth-child(42) {
  left: 72%;
  top: 35%;
  width: 10px;
  height: 10px;
  animation: pop 2.4s ease-in-out 0.92s infinite;
}

.login-sparkles span:nth-child(43),
.gallery-sparkles span:nth-child(43) {
  left: 20%;
  top: 18%;
  width: 15px;
  height: 15px;
  animation: pop 1.7s ease-in-out 0.42s infinite;
}

.login-sparkles span:nth-child(44),
.gallery-sparkles span:nth-child(44) {
  left: 56%;
  top: 88%;
  width: 12px;
  height: 12px;
  animation: pop 1.9s ease-in-out 1.28s infinite;
}

.login-sparkles span:nth-child(45),
.gallery-sparkles span:nth-child(45) {
  left: 94%;
  top: 25%;
  width: 9px;
  height: 9px;
  animation: pop 2.1s ease-in-out 0.52s infinite;
}

.login-sparkles span:nth-child(46),
.gallery-sparkles span:nth-child(46) {
  left: 4%;
  top: 48%;
  width: 16px;
  height: 16px;
  animation: pop 1.4s ease-in-out 0.78s infinite;
}

.login-sparkles span:nth-child(47),
.gallery-sparkles span:nth-child(47) {
  left: 60%;
  top: 55%;
  width: 11px;
  height: 11px;
  animation: pop 2.0s ease-in-out 1.42s infinite;
}

.login-sparkles span:nth-child(48),
.gallery-sparkles span:nth-child(48) {
  left: 34%;
  top: 70%;
  width: 14px;
  height: 14px;
  animation: pop 1.8s ease-in-out 0.28s infinite;
}

.login-sparkles span:nth-child(49),
.gallery-sparkles span:nth-child(49) {
  left: 84%;
  top: 42%;
  width: 13px;
  height: 13px;
  animation: pop 1.6s ease-in-out 1.08s infinite;
}

.login-sparkles span:nth-child(50),
.gallery-sparkles span:nth-child(50) {
  left: 16%;
  top: 92%;
  width: 10px;
  height: 10px;
  animation: pop 2.3s ease-in-out 0.68s infinite;
}

.login-sparkles span:nth-child(51),
.gallery-sparkles span:nth-child(51) {
  left: 47%;
  top: 35%;
  width: 15px;
  height: 15px;
  animation: pop 1.5s ease-in-out 0.15s infinite;
}

.login-sparkles span:nth-child(52),
.gallery-sparkles span:nth-child(52) {
  left: 76%;
  top: 78%;
  width: 12px;
  height: 12px;
  animation: pop 2.2s ease-in-out 0.98s infinite;
}

.login-sparkles span:nth-child(53),
.gallery-sparkles span:nth-child(53) {
  left: 26%;
  top: 58%;
  width: 9px;
  height: 9px;
  animation: pop 1.9s ease-in-out 0.38s infinite;
}

.login-sparkles span:nth-child(54),
.gallery-sparkles span:nth-child(54) {
  left: 66%;
  top: 2%;
  width: 16px;
  height: 16px;
  animation: pop 1.7s ease-in-out 1.22s infinite;
}

.login-sparkles span:nth-child(55),
.gallery-sparkles span:nth-child(55) {
  left: 7%;
  top: 22%;
  width: 11px;
  height: 11px;
  animation: pop 2.0s ease-in-out 0.58s infinite;
}

.login-sparkles span:nth-child(56),
.gallery-sparkles span:nth-child(56) {
  left: 54%;
  top: 72%;
  width: 14px;
  height: 14px;
  animation: pop 1.4s ease-in-out 0.82s infinite;
}

.login-sparkles span:nth-child(57),
.gallery-sparkles span:nth-child(57) {
  left: 38%;
  top: 12%;
  width: 13px;
  height: 13px;
  animation: pop 2.4s ease-in-out 1.45s infinite;
}

.login-sparkles span:nth-child(58),
.gallery-sparkles span:nth-child(58) {
  left: 91%;
  top: 55%;
  width: 10px;
  height: 10px;
  animation: pop 1.6s ease-in-out 0.05s infinite;
}

.login-sparkles span:nth-child(59),
.gallery-sparkles span:nth-child(59) {
  left: 22%;
  top: 85%;
  width: 17px;
  height: 17px;
  animation: pop 2.1s ease-in-out 0.72s infinite;
}

.login-sparkles span:nth-child(60),
.gallery-sparkles span:nth-child(60) {
  left: 64%;
  top: 45%;
  width: 12px;
  height: 12px;
  animation: pop 1.8s ease-in-out 1.12s infinite;
}

.login-sparkles span:nth-child(61),
.gallery-sparkles span:nth-child(61) {
  left: 1%;
  top: 95%;
  width: 9px;
  height: 9px;
  animation: pop 1.5s ease-in-out 0.42s infinite;
}

.login-sparkles span:nth-child(62),
.gallery-sparkles span:nth-child(62) {
  left: 96%;
  top: 8%;
  width: 15px;
  height: 15px;
  animation: pop 2.3s ease-in-out 0.88s infinite;
}

.login-sparkles span:nth-child(63),
.gallery-sparkles span:nth-child(63) {
  left: 42%;
  top: 62%;
  width: 11px;
  height: 11px;
  animation: pop 1.7s ease-in-out 0.18s infinite;
}

.login-sparkles span:nth-child(64),
.gallery-sparkles span:nth-child(64) {
  left: 70%;
  top: 92%;
  width: 14px;
  height: 14px;
  animation: pop 1.9s ease-in-out 1.32s infinite;
}

.login-sparkles span:nth-child(65),
.gallery-sparkles span:nth-child(65) {
  left: 32%;
  top: 28%;
  width: 16px;
  height: 16px;
  animation: pop 2.0s ease-in-out 0.62s infinite;
}

.login-sparkles span:nth-child(66),
.gallery-sparkles span:nth-child(66) {
  left: 80%;
  top: 18%;
  width: 10px;
  height: 10px;
  animation: pop 1.4s ease-in-out 0.95s infinite;
}

.login-sparkles span:nth-child(67),
.gallery-sparkles span:nth-child(67) {
  left: 11%;
  top: 52%;
  width: 13px;
  height: 13px;
  animation: pop 2.2s ease-in-out 0.28s infinite;
}

.login-sparkles span:nth-child(68),
.gallery-sparkles span:nth-child(68) {
  left: 58%;
  top: 78%;
  width: 12px;
  height: 12px;
  animation: pop 1.6s ease-in-out 1.48s infinite;
}

.login-sparkles span:nth-child(69),
.gallery-sparkles span:nth-child(69) {
  left: 88%;
  top: 32%;
  width: 15px;
  height: 15px;
  animation: pop 1.8s ease-in-out 0.52s infinite;
}

.login-sparkles span:nth-child(70),
.gallery-sparkles span:nth-child(70) {
  left: 46%;
  top: 48%;
  width: 9px;
  height: 9px;
  animation: pop 2.1s ease-in-out 0.82s infinite;
}

.login-sparkles span:nth-child(71),
.gallery-sparkles span:nth-child(71) {
  left: 5%;
  top: 8%;
  width: 11px;
  height: 11px;
  animation: pop 1.5s ease-in-out 1.15s infinite;
}

.login-sparkles span:nth-child(72),
.gallery-sparkles span:nth-child(72) {
  left: 74%;
  top: 65%;
  width: 16px;
  height: 16px;
  animation: pop 2.4s ease-in-out 0.35s infinite;
}

.login-sparkles span:nth-child(73),
.gallery-sparkles span:nth-child(73) {
  left: 24%;
  top: 38%;
  width: 14px;
  height: 14px;
  animation: pop 1.7s ease-in-out 0.68s infinite;
}

.login-sparkles span:nth-child(74),
.gallery-sparkles span:nth-child(74) {
  left: 52%;
  top: 85%;
  width: 10px;
  height: 10px;
  animation: pop 1.9s ease-in-out 1.02s infinite;
}

.login-sparkles span:nth-child(75),
.gallery-sparkles span:nth-child(75) {
  left: 36%;
  top: 5%;
  width: 13px;
  height: 13px;
  animation: pop 2.0s ease-in-out 0.22s infinite;
}

.login-sparkles span:nth-child(76),
.gallery-sparkles span:nth-child(76) {
  left: 93%;
  top: 75%;
  width: 12px;
  height: 12px;
  animation: pop 1.4s ease-in-out 1.38s infinite;
}

.login-sparkles span:nth-child(77),
.gallery-sparkles span:nth-child(77) {
  left: 17%;
  top: 65%;
  width: 15px;
  height: 15px;
  animation: pop 2.3s ease-in-out 0.48s infinite;
}

.login-sparkles span:nth-child(78),
.gallery-sparkles span:nth-child(78) {
  left: 62%;
  top: 30%;
  width: 9px;
  height: 9px;
  animation: pop 1.6s ease-in-out 0.78s infinite;
}

.login-sparkles span:nth-child(79),
.gallery-sparkles span:nth-child(79) {
  left: 44%;
  top: 42%;
  width: 17px;
  height: 17px;
  animation: pop 2.1s ease-in-out 1.25s infinite;
}

.login-sparkles span:nth-child(80),
.gallery-sparkles span:nth-child(80) {
  left: 83%;
  top: 58%;
  width: 11px;
  height: 11px;
  animation: pop 1.8s ease-in-out 0.08s infinite;
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }

  20% {
    opacity: 1;
    transform: scale(1.3) rotate(15deg);
  }

  40% {
    opacity: 0.7;
    transform: scale(0.9) rotate(-10deg);
  }

  60% {
    opacity: 0.4;
    transform: scale(1.1) rotate(5deg);
  }

  100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
}

@keyframes slowPop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }

  25% {
    opacity: 0.6;
    transform: scale(1.1) rotate(10deg);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.2) rotate(-5deg);
  }

  75% {
    opacity: 0.4;
    transform: scale(0.9) rotate(5deg);
  }

  100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
}

/* Gallery specifically: less present, glowy, slow */
.gallery-sparkles span {
  animation-name: slowPop !important;
  animation-duration: 6s !important;
  filter: drop-shadow(0 0 3px rgba(255, 206, 153, 0.8));
}

.gallery-sparkles span:nth-child(even) {
  display: none;
}



.login-sparkles span:nth-child(1),
.gallery-sparkles span:nth-child(1) {
  left: 8%;
  top: 12%;
  width: 14px;
  height: 14px;
  animation: pop 1.8s ease-in-out 0s infinite;
}

.login-sparkles span:nth-child(2),
.gallery-sparkles span:nth-child(2) {
  left: 88%;
  top: 18%;
  width: 18px;
  height: 18px;
  animation: pop 2.2s ease-in-out 0.15s infinite;
}

.login-sparkles span:nth-child(3),
.gallery-sparkles span:nth-child(3) {
  left: 42%;
  top: 82%;
  width: 12px;
  height: 12px;
  animation: pop 1.5s ease-in-out 0.35s infinite;
}

.login-sparkles span:nth-child(4),
.gallery-sparkles span:nth-child(4) {
  left: 74%;
  top: 52%;
  width: 10px;
  height: 10px;
  animation: pop 2.0s ease-in-out 0.55s infinite;
}

.login-sparkles span:nth-child(5),
.gallery-sparkles span:nth-child(5) {
  left: 18%;
  top: 42%;
  width: 16px;
  height: 16px;
  animation: pop 1.7s ease-in-out 0.25s infinite;
}

.login-sparkles span:nth-child(6),
.gallery-sparkles span:nth-child(6) {
  left: 62%;
  top: 8%;
  width: 11px;
  height: 11px;
  animation: pop 2.1s ease-in-out 0.7s infinite;
}

.login-sparkles span:nth-child(7),
.gallery-sparkles span:nth-child(7) {
  left: 33%;
  top: 32%;
  width: 15px;
  height: 15px;
  animation: pop 1.6s ease-in-out 0.9s infinite;
}

.login-sparkles span:nth-child(8),
.gallery-sparkles span:nth-child(8) {
  left: 92%;
  top: 68%;
  width: 10px;
  height: 10px;
  animation: pop 2.4s ease-in-out 0.45s infinite;
}

.login-sparkles span:nth-child(9),
.gallery-sparkles span:nth-child(9) {
  left: 3%;
  top: 62%;
  width: 13px;
  height: 13px;
  animation: pop 1.9s ease-in-out 1.1s infinite;
}

.login-sparkles span:nth-child(10),
.gallery-sparkles span:nth-child(10) {
  left: 52%;
  top: 3%;
  width: 17px;
  height: 17px;
  animation: pop 2.0s ease-in-out 0.1s infinite;
}

.login-sparkles span:nth-child(11),
.gallery-sparkles span:nth-child(11) {
  left: 80%;
  top: 90%;
  width: 12px;
  height: 12px;
  animation: pop 1.4s ease-in-out 0.65s infinite;
}

.login-sparkles span:nth-child(12),
.gallery-sparkles span:nth-child(12) {
  left: 28%;
  top: 92%;
  width: 14px;
  height: 14px;
  animation: pop 2.3s ease-in-out 1.0s infinite;
}

.login-sparkles span:nth-child(13),
.gallery-sparkles span:nth-child(13) {
  left: 58%;
  top: 40%;
  width: 9px;
  height: 9px;
  animation: pop 1.6s ease-in-out 0.8s infinite;
}

.login-sparkles span:nth-child(14),
.gallery-sparkles span:nth-child(14) {
  left: 12%;
  top: 85%;
  width: 16px;
  height: 16px;
  animation: pop 2.1s ease-in-out 1.3s infinite;
}

.login-sparkles span:nth-child(15),
.gallery-sparkles span:nth-child(15) {
  left: 95%;
  top: 38%;
  width: 13px;
  height: 13px;
  animation: pop 1.8s ease-in-out 0.12s infinite;
}

.login-sparkles span:nth-child(16),
.gallery-sparkles span:nth-child(16) {
  left: 40%;
  top: 15%;
  width: 11px;
  height: 11px;
  animation: pop 1.5s ease-in-out 0.5s infinite;
}

.login-sparkles span:nth-child(17),
.gallery-sparkles span:nth-child(17) {
  left: 70%;
  top: 28%;
  width: 15px;
  height: 15px;
  animation: pop 2.0s ease-in-out 0.3s infinite;
}

.login-sparkles span:nth-child(18),
.gallery-sparkles span:nth-child(18) {
  left: 22%;
  top: 72%;
  width: 10px;
  height: 10px;
  animation: pop 1.7s ease-in-out 1.5s infinite;
}

.login-sparkles span:nth-child(19),
.gallery-sparkles span:nth-child(19) {
  left: 85%;
  top: 5%;
  width: 12px;
  height: 12px;
  animation: pop 2.2s ease-in-out 0.4s infinite;
}

.login-sparkles span:nth-child(20),
.gallery-sparkles span:nth-child(20) {
  left: 48%;
  top: 58%;
  width: 14px;
  height: 14px;
  animation: pop 1.9s ease-in-out 0.75s infinite;
}

.login-sparkles span:nth-child(21),
.gallery-sparkles span:nth-child(21) {
  left: 6%;
  top: 30%;
  width: 9px;
  height: 9px;
  animation: pop 1.4s ease-in-out 1.2s infinite;
}

.login-sparkles span:nth-child(22),
.gallery-sparkles span:nth-child(22) {
  left: 65%;
  top: 75%;
  width: 17px;
  height: 17px;
  animation: pop 2.3s ease-in-out 0.2s infinite;
}

.login-sparkles span:nth-child(23),
.gallery-sparkles span:nth-child(23) {
  left: 38%;
  top: 50%;
  width: 11px;
  height: 11px;
  animation: pop 1.6s ease-in-out 0.95s infinite;
}

.login-sparkles span:nth-child(24),
.gallery-sparkles span:nth-child(24) {
  left: 82%;
  top: 45%;
  width: 13px;
  height: 13px;
  animation: pop 2.1s ease-in-out 0.6s infinite;
}

.login-sparkles span:nth-child(25),
.gallery-sparkles span:nth-child(25) {
  left: 15%;
  top: 55%;
  width: 15px;
  height: 15px;
  animation: pop 1.8s ease-in-out 1.4s infinite;
}

.login-sparkles span:nth-child(26),
.gallery-sparkles span:nth-child(26) {
  left: 55%;
  top: 22%;
  width: 10px;
  height: 10px;
  animation: pop 1.5s ease-in-out 0.85s infinite;
}

.login-sparkles span:nth-child(27),
.gallery-sparkles span:nth-child(27) {
  left: 75%;
  top: 95%;
  width: 12px;
  height: 12px;
  animation: pop 2.0s ease-in-out 0.05s infinite;
}

.login-sparkles span:nth-child(28),
.gallery-sparkles span:nth-child(28) {
  left: 25%;
  top: 8%;
  width: 16px;
  height: 16px;
  animation: pop 1.7s ease-in-out 1.15s infinite;
}

.login-sparkles span:nth-child(29),
.gallery-sparkles span:nth-child(29) {
  left: 46%;
  top: 68%;
  width: 9px;
  height: 9px;
  animation: pop 2.4s ease-in-out 0.38s infinite;
}

.login-sparkles span:nth-child(30),
.gallery-sparkles span:nth-child(30) {
  left: 90%;
  top: 15%;
  width: 14px;
  height: 14px;
  animation: pop 1.6s ease-in-out 0.58s infinite;
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }

  20% {
    opacity: 0.8;
    transform: scale(1.3) rotate(15deg);
  }

  40% {
    opacity: 0.5;
    transform: scale(0.9) rotate(-10deg);
  }

  60% {
    opacity: 0.3;
    transform: scale(1.1) rotate(5deg);
  }

  100% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
}


/* ============================
   HEADER
============================ */
.main-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 40px;
  background: transparent;
  z-index: 100;
  border-bottom: none;
  border-radius: 0;
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}

.header-inner-no-search {
  display: flex;
  justify-content: space-between;
}

.header-logo {
  justify-self: start;
}

.header-logo a {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.8rem;
  color: #562F00;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.header-logo a:hover {
  opacity: 0.8;
}

/* Search bar centered in header */
.header-search {
  justify-self: center;
}

.header-search .search-wrapper {
  position: relative;
  /* Collapsed state: width = height (pill shape) */
  /* Collapsed state: width = height (pill shape) */
  width: 3rem;
  height: 3rem;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  border-radius: var(--radius-pill);
}

.header-search .search-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
  opacity: 0.8;
  z-index: 2;
  transition: opacity 0.3s ease;
}

.header-search .search-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #562F00;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.header-search .search-input {
  width: 100%;
  height: 100%;
  padding: 0 0 0 3.2rem;
  /* Space for icon when expanded */
  background: rgba(255, 253, 241, 0.85);
  /* Keep bg */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: none;
  /* Removed stroke as requested */
  /* border: 1.5px solid #562F00; */
  border-radius: var(--radius-pill);
  color: #562F00;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  outline: none;
  transition: all 0.3s ease;
  opacity: 0;
  /* Hidden by default */
  cursor: pointer;
}

/* Hover state: Expand wrapper */
.header-search:hover .search-wrapper,
.header-search .search-wrapper:focus-within {
  width: 260px;
}

/* Hover state: Show input and move icon */
.header-search:hover .search-input,
.header-search .search-wrapper:focus-within .search-input {
  opacity: 1;
  padding-left: 3rem;
  cursor: text;
}

.header-search:hover .search-icon,
.header-search .search-wrapper:focus-within .search-icon {
  left: 1.2rem;
  transform: translate(0, -50%);
}

.header-search .search-input::placeholder {
  color: #562F00;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.65rem;
}

.header-search .search-input:focus {
  border-color: transparent;
  box-shadow: none;
}

.header-search .search-clear {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #FFCE99;
  font-size: 1rem;
  cursor: url('../import/mouse2.png'), pointer;
  padding: 0.1rem;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease;
  pointer-events: none;
}

.header-search .search-clear.visible {
  opacity: 1;
  pointer-events: auto;
}

.header-search .search-clear:hover {
  color: #FFCE99;
}

.header-nav {
  justify-self: end;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.header-nav a {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.65rem;
  color: #562F00;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.3rem 0.9rem;
  background: #FFFDF1;
  border: 1.5px solid #562F00;
  border-radius: var(--radius-pill);
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(86, 47, 0, 0.1);
  cursor: url('../import/mouse2.png'), pointer;
  position: relative;
}

.header-nav a.active-nav {
  background: #562F00;
  color: #FFFDF1;
  border-color: #562F00;
}

.header-nav a:hover {
  color: #FFFDF1;
  background: #FFCE99;
  border-color: #562F00;
  box-shadow: 0 4px 12px rgba(86, 47, 0, 0.25);
  transform: translateY(-1px);
}

.header-nav a:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px rgba(86, 47, 0, 0.15);
}


/* ============================
   GALLERY WRAPPER
============================ */
.gallery-wrapper {
  transition: opacity 0.8s ease;
}

.gallery-wrapper.hidden {
  opacity: 0;
  pointer-events: none;
}


/* ============================
   HORIZONTAL GALLERY
============================ */
.hgallery-section {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Centering: padding adjusted to shift up slightly */
  padding-top: 60px;
  padding-bottom: 8vh;
  /* Visual alignment */
  position: relative;
  /* Added for absolute sparkles */
}

.hgallery-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
  flex: 0 0 auto;
}

.hgallery-track {
  display: flex;
  gap: 1.5rem;
  padding: 15rem 0;
  /* Massively increased padding for huge glow */
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hgallery-item {
  /* Medium souvenirs: divide by 5 */
  flex: 0 0 calc((100vw - 6rem) / 5);
  text-decoration: none;
  display: block;
  cursor: url('../import/mouse2.png'), pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* Float animation moved here to allow inner scale transform */
  animation: floatAround 18s infinite ease-in-out alternate;
}

/* Removed problematic first-child margin that breaks infinite scroll math */
/* .hgallery-item:first-child {
  margin-left: calc((100vw - (100vw - 6rem)) / 2);
} */

.hgallery-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  /* Removed border to focus on shadow depth */
  border: none;
  /* Removed shadow as requested */
  /* box-shadow: ... */
  box-shadow: none;
  border: 1px solid rgba(255, 150, 68, 0.1);

  /* Animation for glow (float moved to parent) */
  animation: softGlow 12s infinite ease-in-out;
  /* Delays set by JS */

  transition: transform 0.4s ease;
  background: #FFFDF1;
}

.hgallery-item:hover .hgallery-img-wrap {
  /* Scale up on hover */
  transform: scale(1.05);
  /* Keep glow active or enhance it? User just said scale. */
  /* Let's make sure it doesn't break the glow animation */
}

@keyframes softGlow {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 150, 68, 0);
    border-color: rgba(255, 150, 68, 0.1);
  }

  20% {
    box-shadow: 0 0 0 0px rgba(255, 150, 68, 0);
    border-color: rgba(255, 150, 68, 0.1);
  }

  50% {
    /* Optimized glow: single layer, smaller spread */
    box-shadow: 0 0 120px 40px rgba(255, 150, 68, 0.6);
    border-color: rgba(255, 150, 68, 0.8);
  }

  80% {
    box-shadow: 0 0 0 0px rgba(255, 150, 68, 0);
    border-color: rgba(255, 150, 68, 0.1);
  }

  100% {
    box-shadow: 0 0 0 0px rgba(255, 150, 68, 0);
    border-color: rgba(255, 150, 68, 0.1);
  }

}

@keyframes floatAround {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(6px, -8px);
  }

  50% {
    transform: translate(-5px, 4px);
  }

  75% {
    transform: translate(-7px, -4px);
  }

  100% {
    transform: translate(0, 0);
  }
}

.hgallery-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease, filter 0.4s ease;
  filter: brightness(0.95) saturate(0.95);
}

.hgallery-item:hover .hgallery-img-wrap img {
  transform: scale(1.08);
  filter: brightness(1) saturate(1);
}


/* ============================
   GALLERY INFO BAR
============================ */
.hgallery-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 2.2rem 4rem 1.5rem 4rem;
  /* Reduced bottom padding to lower text */
  background: transparent;
  /* Removed border radius */
  border-radius: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.8rem;
  transition: all 0.4s ease;
  flex: 0 0 auto;
}

.hgallery-info-num {
  font-family: var(--font);
  font-weight: 700;
  font-size: 1rem;
  /* Scaled up */
  color: #562F00;
  letter-spacing: 0.05em;
  justify-self: start;
}

.hgallery-info-sep {
  display: none;
}

.hgallery-info-date {
  font-family: var(--font);
  font-weight: 800;
  /* Thicker */
  font-size: 0.9rem;
  /* Scaled up */
  color: #562F00;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  justify-self: end;
}

.hgallery-info-title {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 0.95rem;
  /* Scaled up */
  color: var(--text-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  justify-self: center;
}


/* ============================
   SEARCH BAR (no-results + active)
============================ */
.search-no-results {
  text-align: center;
  color: #FFCE99;
  font-family: var(--font);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2rem;
  display: none;
}

.search-no-results.visible {
  display: block;
}

/* Search active: hide clones, switch to filtered grid */
.hgallery-track.search-active {
  flex-wrap: wrap;
  justify-content: center;
  transition: none;
  transform: none !important;
}

.hgallery-item.search-hidden {
  display: none !important;
}


/* ============================
   LIGHTBOX
============================ */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('../import/leopard2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  /* Ensure overflow handling if needed, though flex centering usually suffices */
}

.lightbox-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(86, 47, 0, 0.35);
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: 100vh;
  /* Full screen */
  animation: lightbox-in 0.4s ease;
  justify-content: center;
  /* Centering */
}

@keyframes lightbox-in {
  from {
    transform: scale(0.92);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Lightbox Image Wrapper - Flexbox for Arrow-Image-Arrow layout */
.lightbox-img-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  /* Space between arrows and image */
  pointer-events: auto;
  margin-top: -25px;
  /* Moved image up further as requested */
}

/* Lightbox Controls Row */
/* Lightbox Controls Row - Footer Style */
/* Lightbox Controls Row - Footer Style */
.lightbox-controls-row {
  position: absolute;
  bottom: 15px;
  /* Moved up 10px as requested */
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  /* 90% of page width */
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  /* Buttons at edges */
  gap: 15px;
  pointer-events: auto;
  z-index: 30;
}

.lightbox-image-container {
  position: relative;
  display: inline-flex;
  /* Shrink to fit image */
}

.lightbox-image {
  max-width: 90vw;
  max-height: calc(100vh - 120px);
  /* Reduced to make room for footer controls */
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  user-select: none;
  /* border removed as requested */
  object-fit: contain;
}



/* Close button - moved to corner of image via JS/CSS */
/* Close button - now in controls row, static position */
.lightbox-close {
  position: static;
  width: 44px;
  /* Auto height handled by flex stretch */
  min-height: 44px;
  background: #FFFDF1;
  backdrop-filter: blur(6px);
  border: 1.5px solid #562F00;
  border-radius: 50%;
  color: #562F00;
  font-size: 1.3rem;
  cursor: url('../import/mouse2.png'), pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  flex-shrink: 0;
}

.lightbox-close:hover {
  background: #FFCE99;
  color: #562F00;
  border-color: #562F00;
  transform: scale(1.1);
}

.lightbox-prev,
.lightbox-next {
  /* Position static for flex flow */
  position: static;
  transform: none;
  background: #FFFDF1;
  backdrop-filter: blur(4px);
  border: 1.5px solid #562F00;
  border-radius: 50%;
  color: #562F00;
  width: 44px;
  height: 44px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url('../import/mouse2.png'), pointer;
  z-index: 20;
  /* Increased z-index significantly */
  transition: all 0.2s ease;
  user-select: none;
  pointer-events: auto;
  /* Ensure clickable */
  flex-shrink: 0;
  /* Prevent shrinking */
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: #FFCE99;
  color: #562F00;
  border-color: #562F00;
  transform: scale(1.1);
}

.lightbox-prev {
  order: -1;
}

.lightbox-next {
  order: 1;
}

/* Position arrows closer to image (inside the wrapper) */
/* These are no longer needed as position is static and flex gap handles spacing */
/* .lightbox-prev {
  left: 10px;
}

.lightbox-next {
  right: 10px;
} */

/* Re-enable Info Bar elements */
.hgallery-info-date {
  display: inline-block;
}

.hgallery-info-title {
  display: inline-block;
}

.hgallery-info-sep {
  display: inline-block;
}

/* ============================================
   MOBILE — ≤768px
   All mobile fixes in one place
============================================ */
@media (max-width: 768px) {

  /* ── Viewport lock: gallery page ONLY (.page-gallery on body in index.html) ── */
  body.page-gallery {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  html:has(body.page-gallery) {
    overflow: hidden;
    height: 100dvh;
  }

  /* ── Gallery section: full viewport, header offset via padding-top ── */
  .hgallery-section {
    height: 100dvh;
    padding-top: 50px;
    /* reserve space for fixed header */
    padding-bottom: 0;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
  }

  /* ── Gallery viewport: fill section between header and info bar ── */
  .hgallery-viewport {
    /* Account for header (50px) + info bar (~54px) */
    max-height: calc(100dvh - 104px);
    overflow: hidden;
    width: 100%;
  }

  /* ── Gallery track: almost no vertical padding ── */
  .hgallery-track {
    padding: 0.2rem 0;
    gap: 0.8rem;
    align-items: center;
  }

  /* ── Cards: height-driven so 3:4 ratio fits the available height ── */
  .hgallery-item {
    height: calc((100dvh - 104px - 0.4rem) * 0.6);
    flex: 0 0 auto;
    width: auto;
  }

  /* Image wrapper: fill parent height, width from aspect-ratio */
  .hgallery-img-wrap {
    height: 100%;
    width: auto;
    max-height: none;
    aspect-ratio: 3 / 4;
  }

  /* ── Header: true 3-column — SUZONE | loop icon | MOUAK ── */
  .main-header {
    height: 50px;
  }

  .header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 1rem;
    gap: 0;
  }

  /* Logo: left */
  .header-logo {
    justify-self: start;
  }

  .header-logo a {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
  }

  /* Search: center — icon-only circle by default, expands on tap */
  .header-search {
    justify-self: center;
  }

  .header-search .search-wrapper {
    width: 36px;
    height: 36px;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Expanded state toggled by JS tap on icon */
  .header-search .search-wrapper.search-expanded {
    width: 200px;
  }

  /* Input: hidden until expanded */
  .header-search .search-input {
    opacity: 0;
    pointer-events: none;
    font-size: 0.65rem;
    padding-left: 2.4rem;
    transition: opacity 0.3s ease;
  }

  .header-search .search-wrapper.search-expanded .search-input {
    opacity: 1;
    pointer-events: auto;
    cursor: text;
  }

  /* Override desktop hover rule: mobile is tap-only */
  .header-search:hover .search-wrapper {
    width: 36px;
  }

  .header-search:hover .search-input {
    opacity: 0;
    pointer-events: none;
    padding-left: 0;
  }

  .header-search:hover .search-icon {
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Icon: centered in collapsed state */
  .header-search .search-icon {
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    transition: left 0.4s ease, transform 0.4s ease;
  }

  /* Icon shifts left when expanded */
  .header-search .search-wrapper.search-expanded .search-icon {
    left: 0.9rem;
    transform: translate(0, -50%);
  }

  /* Nav: right */
  .header-nav {
    justify-self: end;
    gap: 0.4rem;
  }

  .header-nav a {
    font-size: 0.55rem;
    padding: 0.2rem 0.6rem;
    letter-spacing: 0.08em;
  }

  /* Hide RECAP on mobile */
  .nav-recap {
    display: none;
  }

  /* ── Info bar: tighter, smaller text ── */
  .hgallery-info {
    padding: 0.8rem 1.2rem;
    bottom: 0;
  }

  .hgallery-info-num {
    font-size: 0.8rem;
  }

  .hgallery-info-title {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }

  .hgallery-info-date {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }

  /* ── Lightbox arrows ── */
  .lightbox-prev,
  .lightbox-next {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }

  /* ── Lightbox controls ── */
  .lightbox-controls-row {
    gap: 8px;
    width: 95vw;
    bottom: 12px;
  }

  .lightbox-close,
  .lightbox-download {
    width: 36px;
    min-height: 36px;
    font-size: 1rem;
  }

  .lightbox-legend {
    font-size: 0.82rem;
    padding: 5px 10px;
  }
}


/* ============================================
   MOBILE — ≤480px (narrow phones)
============================================ */
@media (max-width: 480px) {

  /* ── Cards: slightly narrower to give more peek ── */
  .hgallery-item {
    flex: 0 0 62vw;
  }

  /* ── Header: keep full 3-col for gallery (no logo hide) ── */
  .header-inner {
    padding: 0 0.6rem;
  }

  /* header-inner-no-search stays space-between (flex from base) */

  .header-search .search-wrapper {
    width: 140px;
    height: 30px;
  }

  .header-search:hover .search-wrapper,
  .header-search .search-wrapper:focus-within {
    width: 170px;
  }

  /* ── Info bar: single line with ellipsis on title ── */
  .hgallery-info {
    padding: 0.6rem 1rem;
  }

  .hgallery-info-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40vw;
  }

  .hgallery-info-num,
  .hgallery-info-date {
    font-size: 0.65rem;
  }

  .hgallery-info-title {
    font-size: 0.68rem;
  }

  /* ── Login ── */
  .login-title {
    font-size: 2rem;
  }

  .login-input {
    width: 220px;
  }

  /* ── Lightbox legend ── */
  .lightbox-legend {
    font-size: 0.75rem;
    padding: 4px 8px;
  }
}

.lightbox-download {
  position: static;
  width: 44px;
  /* Auto height handled by flex stretch */
  min-height: 44px;
  background: #FFFDF1;
  backdrop-filter: blur(6px);
  border: 1.5px solid #562F00;
  border-radius: 50%;
  color: #562F00;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: url('../import/mouse2.png'), pointer;
  z-index: 25;
  transition: all 0.25s ease;
  opacity: 1;
  flex-shrink: 0;
}

.lightbox-download:hover {
  background: #FFCE99;
  color: #562F00;
  border-color: #562F00;
  transform: scale(1.1);
}


/* ============================
   RESPONSIVE
============================ */
@media (max-width: 768px) {

  .hgallery-item {
    flex: 0 0 calc((100vw - 3rem) / 2);
  }

  .hgallery-item:first-child {
    margin-left: 1rem;
  }

  .hgallery-info {
    width: 85%;
  }

  .main-header {
    height: auto;
    padding: 0.3rem 0;
  }

  .header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    padding: 0 1rem;
  }

  .header-search .search-wrapper {
    width: 200px;
  }

  .header-nav {
    gap: 0.6rem;
  }

  .nav-recap {
    display: none;
  }

  .header-nav a {
    font-size: 0.55rem;
    padding: 0.25rem 0.6rem;
  }

  .login-title {
    font-size: 2rem;
  }

  .login-subtitle {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
  }

  .login-input {
    width: 240px;
  }

  .lightbox-content {
    max-width: 92vw;
  }

  .lightbox-close {
    top: -2rem;
    right: 0;
  }
}

@media (max-width: 480px) {
  .hgallery-item {
    flex: 0 0 calc(100vw - 3rem);
  }

  .hgallery-item:first-child {
    margin-left: 1.5rem;
  }

  .hgallery-info {
    width: 90%;
    flex-direction: column;
    gap: 0.3rem;
  }

  .header-inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 0.3rem;
    justify-items: center;
  }

  .header-logo {
    display: none;
  }

  .header-search {
    grid-column: 1;
    grid-row: 1;
  }

  .header-search .search-wrapper {
    width: 250px;
  }

  .header-nav {
    grid-column: 1;
    grid-row: 2;
    justify-self: center;
  }

  .header-logo a {
    font-size: 0.7rem;
  }

  .lightbox-legend {
    font-size: 0.75rem;
    padding: 0.4rem 1.2rem;
  }
}

/* Lightbox Legend - New Style */
/* Lightbox Legend - New Style */
.lightbox-legend {
  flex-grow: 1;
  /* Fill remaining space */
  width: auto;
  /* Remove fixed width */
  box-sizing: border-box;
  /* Ensure padding doesn't add to width */
  max-width: none;
  /* Remove safety cap */
  margin: 0;
  /* Reset margin for flex layout */
  padding: 8px 15px;
  /* Thinner padding */
  background: #FFFDF1;
  /* White-ish base */
  border: 2px solid #562F00;
  /* Brown border */
  border-radius: 999px;
  /* More round */
  box-shadow: 0 0 15px rgba(255, 150, 68, 0.4);
  /* Glowy orange */
  color: #562F00;
  text-align: center;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-overlay.active .lightbox-legend {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .lightbox-controls-row {
    gap: 10px;
    width: 95vw;
    /* Slightly wider on mobile */
  }

  .lightbox-legend {
    width: auto;
    /* Auto width */
    font-size: 0.85rem;
    padding: 6px 10px;
  }

  .lightbox-close,
  .lightbox-download {
    width: 36px;
    min-height: 36px;
    font-size: 1rem;
  }
}