/* Base Styles */
:root {
	--primary: #9d00ff;
	--secondary: #00e5ff;
	--accent: #ff00e5;
	--background: #050510;
	--card-bg: rgba(20, 20, 40, 0.7);
	--text-primary: #ffffff;
	--text-secondary: #b8b8ff;
	--glow-primary: 0 0 10px rgba(157, 0, 255, 0.7),
		0 0 20px rgba(157, 0, 255, 0.5);
	--glow-secondary: 0 0 10px rgba(0, 229, 255, 0.7),
		0 0 20px rgba(0, 229, 255, 0.5);
	--glow-accent: 0 0 10px rgba(255, 0, 229, 0.7), 0 0 20px rgba(255, 0, 229, 0.5);
	--card-width: 300px;
	--card-height: 420px;
	--carousel-radius: 400px;
	--transition-speed: 0.5s;
}

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

body,
html {
  height: 100%;
  font-family: "Chakra Petch", sans-serif;
  background-color: var(--background);
  color: var(--text-primary);
  overflow-x: hidden;   /* keep horizontal hidden if you want */
  overflow-y: auto;     /* allow vertical scrolling */
}


/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Orbitron", sans-serif;
	font-weight: 700;
	letter-spacing: 1px;
}

.title {
	font-size: 2.5rem;
	margin-bottom: 0.5rem;
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: 0 0 15px rgba(157, 0, 255, 0.5);
	animation: pulse 3s infinite alternate;
}

/* Cosmic Background */
.cosmos-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
	overflow: hidden;
}

.stars-container {
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: radial-gradient(1px 1px at 25% 25%, white, rgba(0, 0, 0, 0)),
		radial-gradient(1px 1px at 50% 50%, white, rgba(0, 0, 0, 0)),
		radial-gradient(2px 2px at 75% 75%, white, rgba(0, 0, 0, 0)),
		radial-gradient(2px 2px at 100% 100%, white, rgba(0, 0, 0, 0));
	background-size: 200px 200px, 300px 300px, 400px 400px, 600px 600px;
	background-repeat: repeat;
	animation: twinkle 10s linear infinite;
}

@keyframes twinkle {
	0% {
		background-position: 0 0, 0 0, 0 0, 0 0;
	}
	100% {
		background-position: 200px 200px, 300px 300px, 400px 400px, 600px 600px;
	}
}

/* Carousel Container */
.carousel-container {
	position: relative;
	width: 100%;
	height: 500px;
	perspective: 1000px;
	transform-style: preserve-3d;
	display: flex;
	justify-content: center;
	align-items: center;
	touch-action: none; /* Prevent default touch actions */
}

.carousel {
	position: relative;
	width: var(--carousel-radius);
	height: var(--carousel-radius);
	transform-style: preserve-3d;
	transition: transform 0.5s ease;
}

/* Memory Cards */
.memory-card {
	position: absolute;
	width: var(--card-width);
	height: var(--card-height);
	left: 50%;
	top: 50%;
	margin-left: calc(var(--card-width) / -2);
	margin-top: calc(var(--card-height) / -2);
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	cursor: pointer;
}

.card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.memory-card:hover .card-inner {
	transform: translateZ(20px);
}

.memory-card.flipped .card-inner {
	transform: rotateY(180deg);
}

.card-front,
.card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.card-front {
	background: linear-gradient(
		135deg,
		rgba(30, 30, 60, 0.8),
		rgba(20, 20, 40, 0.9)
	);
	border: 1px solid rgba(157, 0, 255, 0.3);
	transform-style: preserve-3d;
}

.card-back {
	background: linear-gradient(
		135deg,
		rgba(20, 20, 40, 0.9),
		rgba(30, 30, 60, 0.8)
	);
	border: 1px solid rgba(0, 229, 255, 0.3);
	transform: rotateY(180deg);
}

.card-content {
	padding: 20px;
	height: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

.memory-date {
	font-family: "Orbitron", sans-serif;
	font-size: 0.8rem;
	color: var(--accent);
	margin-bottom: 10px;
	text-shadow: 0 0 5px rgba(255, 0, 229, 0.7);
}

.memory-card h3 {
	font-size: 1.5rem;
	margin-bottom: 15px;
	color: var(--text-primary);
	text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.memory-image {
	width: 100%;
	height: 150px;
	margin-bottom: 15px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	border-radius: 8px;
	background: rgba(0, 0, 0, 0.3);
}

.memory-image i {
	color: var(--primary);
	font-size: 4rem;
	text-shadow: var(--glow-primary);
	animation: pulse 3s infinite alternate;
	z-index: 2;
}

.glitch-effect {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		45deg,
		transparent 65%,
		rgba(157, 0, 255, 0.3) 70%,
		transparent 75%
	);
	background-size: 200% 200%;
	animation: glitch 3s linear infinite;
	z-index: 1;
}

@keyframes glitch {
	0% {
		background-position: 0 0;
	}
	25% {
		background-position: 100% 0;
	}
	50% {
		background-position: 100% 100%;
	}
	75% {
		background-position: 0 100%;
	}
	100% {
		background-position: 0 0;
	}
}

.memory-preview {
	font-size: 13px;
	color: white;
	margin-bottom: 15px;
	flex-grow: 1;
}

.card-back .card-content p {
	font-size: 0.9rem;
	color: var(--text-secondary);
	margin-bottom: 20px;
	line-height: 1.5;
	flex-grow: 1;
}

.memory-coordinates {
	font-family: "Orbitron", sans-serif;
	font-size: 0.8rem;
	color: var(--secondary);
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.time-stamp {
	color: var(--accent);
}

.card-glow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 15px;
	pointer-events: none;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(157, 0, 255, 0.1),
		transparent 70%
	);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.memory-card:hover .card-glow {
	opacity: 1;
}

/* Carousel Controls */
.carousel-controls {
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 20px;
	z-index: 10;
}

.control-btn {
	background: rgba(20, 20, 40, 0.7);
	border: 1px solid var(--primary);
	color: var(--text-primary);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s ease;
	box-shadow: var(--glow-primary);
}

.control-btn:hover {
	background: rgba(30, 30, 60, 0.9);
	transform: scale(1.1);
}

/* Footer */
footer {
	position: relative;
	z-index: 10;
}

.instructions {
	font-size: 0.8rem;
	color: var(--text-secondary);
	opacity: 0.7;
}

/* Animations */
@keyframes pulse {
	0%,
	100% {
		opacity: 0.8;
	}
	50% {
		opacity: 1;
	}
}

/* Responsive Adjustments */
@media (max-width: 768px) {
	:root {
		--card-width: 250px;
		--card-height: 350px;
		--carousel-radius: 300px;
	}

	.title {
		font-size: 1.8rem;
	}

	.carousel-container {
		height: 400px;
	}

	.memory-card h3 {
		font-size: 1.2rem;
	}

	.memory-image {
		height: 120px;
	}
}

@media (max-width: 576px) {
	:root {
		--card-width: 220px;
		--card-height: 320px;
		--carousel-radius: 250px;
	}

	.title {
		font-size: 1.5rem;
	}

	.carousel-container {
		height: 350px;
	}
}


  html, body { overflow-y: auto !important; }
.aina-title {
  font-family: "Chakra Petch", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.05;
  text-align: center;
  margin: 0.5rem 0;
}

.aina-title.gradient {
  font-weight: 900;
  font-size: clamp(2.2rem, 6vw, 5rem);
  background: linear-gradient(90deg,
    #fb4934, #fabd2f, #b8bb26, #8ec07c, #83a598, #d3869b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.35));
}

.aina-subtitle {
  text-align: center;
  font-size: clamp(1rem, 2.2vw, 1.3rem);
  opacity: 0.9;
  margin-top: 0.25rem;
}

/* --- Tuning knobs --- */
:root{
  --hero-max: 1100px;
  --hero-pad: clamp(2rem, 6vw, 6rem);
  --title-size: clamp(2.4rem, 8vw, 5.2rem);
  --subtitle-size: clamp(1.05rem, 2.2vw, 1.35rem);

  /* Gruvbox-ish accent sweep */
  --accent-grad: linear-gradient(90deg,
    #fb4934 0%,
    #fabd2f 22%,
    #b8bb26 45%,
    #8ec07c 67%,
    #83a598 85%,
    #d3869b 100%
  );
}

/* Container */
.aina-hero{
  position: relative;
  padding: var(--hero-pad) 1.25rem;
  display: grid;
  place-items: center;
  overflow: visible;
}

.aina-hero__inner{
  width: 100%;
  max-width: var(--hero-max);
  text-align: center;
}

/* Title */
.aina-hero__title{
  font-family: "Fira Sans", sans-serif;
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: 0.02em;
  font-size: var(--title-size);
  margin: 0;
  text-wrap: balance;            /* nicer line breaks on modern browsers */
  -webkit-font-smoothing: antialiased;
}

.aina-hero__line{
  display: block;
  color: #ebdbb2;                /* base title color; tweak for light themes */
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 8px 24px rgba(0,0,0,.28);
}

.aina-hero__line.accent{
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* soft outline to keep contrast over busy images */
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 10px 34px rgba(0,0,0,.35);
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.25));
}

/* Subtitle */
.aina-hero__subtitle{
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-size: var(--subtitle-size);
  opacity: .92;
  margin: clamp(.6rem, 1.5vw, .9rem) auto 0;
  max-width: 70ch;
}

/* Optional: subtle shine on the accent line (can remove if you want flat) */
@media (prefers-reduced-motion: no-preference){
  .aina-hero__line.accent{
    background-size: 200% 100%;
    animation: ainaSheen 8s ease-in-out infinite;
  }
  @keyframes ainaSheen{
    0%,100%{ background-position: 0% 50%; }
    50%    { background-position: 100% 50%; }
  }
}

/* Safety: neutralize any inherited weirdness */
.aina-hero, .aina-hero *{
  box-sizing: border-box;
}

/* Force single-line on desktops/tablets */
.aina-hero__title.one-line{
  white-space: nowrap;           /* keep it on one line */
  display: inline-block;
  font-size: clamp(2.6rem, 8.2vw, 6rem);
  letter-spacing: 0.02em;
  margin: 0;
}

/* Orange for ROCHESTON (keep what you liked) */
.aina-hero__title .brand{
  color: #ff9a1f;
  text-shadow: 0 0 10px rgba(255,154,31,.5), 0 14px 36px rgba(0,0,0,.5);
}

/* Neon gradient for AINA OS */
.aina-hero__title .accent{
  background: linear-gradient(90deg, #b400ff, #00eaff, #ff00e5);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  text-shadow: 0 0 10px rgba(0,234,255,.55), 0 20px 40px rgba(0,0,0,.55);
}

/* Give extra breathing room below the title so it never “touches” the cards */
.aina-hero{ padding-bottom: clamp(2rem, 5vw, 4.5rem); }
.carousel-container{ margin-top: clamp(1rem, 3.5vw, 3rem); }

/* On very small screens, allow wrapping again to avoid overflow */
@media (max-width: 520px){
  .aina-hero__title.one-line{ white-space: normal; text-wrap: balance; }
  .hero-underline{ width: 88%; }
}
/* === Minimal POP fix (no animation) === */

/* 0) Slightly lighter, static background so neon stands out */
body{
  background:
    radial-gradient(1100px 520px at 50% -6%, #1a1330 0%, transparent 60%),
    radial-gradient(800px 480px at 85% 80%, #0f1c2a 0%, transparent 60%),
    #0a0b14; /* base */
}

/* 1) Tighter spacing above, clear gap below header */
.aina-hero{
  padding-top: clamp(.4rem, 2vw, 1rem);
  padding-bottom: clamp(1rem, 3vw, 2rem);
}

/* 2) Force single-line title on normal screens; wrap only on tiny phones */
.aina-hero__title{
  margin: 0;
  font-size: clamp(3rem, 9vw, 6.2rem);
  letter-spacing: .01em;
  white-space: nowrap;
}
@media (max-width: 520px){
  .aina-hero__title{ white-space: normal; text-wrap: balance; }
}

/* 3) Make it “pop”: soft halo + crisp stroke for readability */
.aina-hero__title{ position: relative; }
.aina-hero__title::after{
  content:"";
  position:absolute; inset:-8px -14px;
  z-index:-1;
  background:
    radial-gradient(60% 60% at 35% 45%, rgba(255,154,31,.28), transparent 60%),
    radial-gradient(60% 60% at 70% 60%, rgba(0,234,255,.20), transparent 60%);
  filter: blur(18px);
  opacity:.9;
}

/* ROCHESTON = orange, bold, crisp */
.aina-hero__title .brand{
  color:#ff9a1f;
  -webkit-text-stroke: 0.8px rgba(0,0,0,.25);
  text-shadow:
    0 0 12px rgba(255,154,31,.55),
    0 6px 22px rgba(0,0,0,.55);
}

/* AINA OS = brighter gradient + edge stroke */
.aina-hero__title .accent{
  background: linear-gradient(90deg, #ba44ff 0%, #18e6ff 55%, #ff39ea 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  -webkit-text-stroke: 0.8px rgba(0,0,0,.2);
  text-shadow:
    0 0 14px rgba(24,230,255,.5),
    0 6px 22px rgba(0,0,0,.55);
}

/* 4) Underline = thinner, brighter */
.hero-underline{
  margin:.35rem auto 0;
  height:3px; width:min(82vw, 760px);
  border-radius:999px;
  background: linear-gradient(90deg, #ff9a1f, #18e6ff, #ff39ea);
  box-shadow: 0 0 18px rgba(186,68,255,.45), 0 0 24px rgba(24,230,255,.35);
}

/* 5) Subtitle a touch brighter, better legibility */
.aina-hero__subtitle{
  color:#e9ebff;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
  opacity:1;
}

/* 6) Make sure the carousel never bumps the header */
.carousel-container{ margin-top: clamp(.5rem, 2.5vw, 1.75rem); }
/* === Site background: bg.png === */
/* Put bg.png next to index.html (or update the url path accordingly) */
body{
  /* fallback color behind the image */
  background-color: #0a0b14;
  /* hero-grade background image */
  background-image: url("bg.png");
  background-size: cover;            /* fill the viewport */
  background-position: center center;/* keep point of interest centered */
  background-attachment: fixed;      /* subtle parallax feel */
  background-repeat: no-repeat;
}

/* Soft vignette overlay for readability on bright areas */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  /* top light, edge dark for contrast */
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(120% 90% at 50% 110%, rgba(0,0,0,.44), rgba(0,0,0,.66) 65%);
}

/* Remove/override previous generated cosmos layers if present */
.cosmos-background,
.stars-container{ display: none !important; }

/* --- Header: one-line + pop (keeps your orange/gradient split) --- */
.aina-hero{ padding-top: .5rem; padding-bottom: 1.5rem; }
.aina-hero__title.one-line{
  white-space: nowrap;
  font-size: clamp(3rem, 9vw, 6.2rem);
  letter-spacing: .01em;
  margin: 0;
}
.aina-hero__title{ position: relative; }
.aina-hero__title::after{
  /* gentle halo to lift text off the photo */
  content:""; position:absolute; inset:-8px -14px; z-index:-1;
  background:
    radial-gradient(60% 60% at 35% 45%, rgba(255,154,31,.28), transparent 60%),
    radial-gradient(60% 60% at 70% 60%, rgba(0,234,255,.18), transparent 60%);
  filter: blur(18px); opacity:.9;
}
.aina-hero__title .brand{           /* ROCHESTON */
  color:#ff9a1f;
  -webkit-text-stroke: .8px rgba(0,0,0,.25);
  text-shadow: 0 0 12px rgba(255,154,31,.5), 0 6px 22px rgba(0,0,0,.55);
}
.aina-hero__title .accent{          /* AINA OS */
  background: linear-gradient(90deg, #ba44ff 0%, #18e6ff 55%, #ff39ea 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .8px rgba(0,0,0,.18);
  text-shadow: 0 0 14px rgba(24,230,255,.5), 0 6px 22px rgba(0,0,0,.55);
}
.hero-underline{
  margin:.35rem auto 0; height:3px; width:min(82vw, 760px); border-radius:999px;
  background: linear-gradient(90deg, #ff9a1f, #18e6ff, #ff39ea);
  box-shadow: 0 0 18px rgba(186,68,255,.45), 0 0 24px rgba(24,230,255,.35);
}

/* Keep carousel clear of header */
.carousel-container{ margin-top: 1rem; }

/* Mobile: allow wrapping if needed */
@media (max-width: 520px){
  .aina-hero__title.one-line{ white-space: normal; text-wrap: balance; }
}

/* ---- FORCE bg.png as the page background ---- */
.cosmos-background, .stars-container { display: none !important; }  /* remove overlay */

html, body { background: none !important; }  /* clear previous backgrounds */

body{
  background: #0a0b14 url('./bg.png') center center / cover no-repeat fixed !important;
  /* if iOS Safari jitters, change 'fixed' -> 'scroll' */
}


/* Full-bleed image behind everything */
.page-bg{
  position: fixed;
  inset: 0;
  z-index: -2;                               /* sits under all content */
  background: #0a0b14 url('bg.png') center / cover no-repeat;
  /* if iOS Safari feels janky with parallax, add: background-attachment: scroll; */
}

/* Kill the old star/cosmos overlay so it can’t sit above the image */
.cosmos-background,
.stars-container{ display: none !important; }
/* control strength here (0 = transparent, 1 = solid) */
:root { --bg-darken: 0.45; }  /* try 0.35–0.6 */

.page-bg{
  position: fixed;
  inset: 0;
  z-index: -2;
  background: #0a0b14 url('bg.png') center / cover no-repeat;
}

/* overlay to increase "opacity" of the bg image */
.page-bg::after{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,var(--bg-darken));  /* darken overlay */
  pointer-events:none;
}

/* Center and size beetle icons inside the card image area */
.memory-image {
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;           /* no dark box behind */
  position: relative;
  overflow: hidden;
}

.memory-image img.icon{
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
  animation: pulse 3s infinite alternate; /* reuse your pulse */
  z-index: 2;                               /* above any bg layers */
}

/* If you keep the glitch layer, keep it under the icon */
.memory-image .glitch-effect{ z-index: 1; }

/* Keep the arrow bar on top and clickable */
.carousel-controls{
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 9999;          /* above cards/hotzones */
  pointer-events: none;   /* let only the buttons take clicks */
}
.carousel-controls .control-btn{
  pointer-events: auto;   /* buttons receive the click */
}

/* If you ever added hotzones, keep them below the controls */
.carousel-hotzone{ z-index: 9000; }

/* ===== FINAL HEADER/BG FIX (deduped) ===== */

/* Hide the hero header completely */
.aina-hero { display: none !important; }
.aina-hero__inner, .aina-hero__title, .aina-hero__subtitle,
.hero-underline, .aina-title { display: none !important; }

/* Pull carousel up */
.carousel-container { margin-top: 0 !important; }

/* Use Fira Sans site-wide and kill legacy fonts */
html, body { font-family: "Fira Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: "Fira Sans", sans-serif; }

/* Background: use the page-bg layer; disable the cosmos overlay */
.cosmos-background, .stars-container { display: none !important; }

/* Full-bleed BG image layer (you already have <div class="page-bg"></div> in HTML) */
.page-bg{
  position: fixed; inset: 0; z-index: -2;
  background: #0a0b14 url('bg.png') center / cover no-repeat;
}
/* Optional: darken/tint the BG image; tweak alpha to taste */
:root { --bg-darken: 0.35; } /* 0–1 */
.page-bg::after{
  content:""; position:absolute; inset:0;
  background: rgba(0,0,0,var(--bg-darken));
  pointer-events:none;
}
:root { --brand-orange: #ff9a1f; } /* or your preferred orange */
.brand-orange{
  color: var(--brand-orange);
  text-shadow: 0 0 10px rgba(255,154,31,.45), 0 6px 18px rgba(0,0,0,.45);
  /* optional punch: font-weight: 900; */
}