/* Fonts */
@font-face {
  font-family: 'GT America';
  src: url('../resources/fonts/GT-America-Mono-Regular-OCC.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'SuisseIntl';
  src: url('../resources/fonts/SuisseIntl-Light-WebS.woff2') format('woff2');
  font-weight: 300;
}
@font-face {
  font-family: 'SuisseIntl';
  src: url('../resources/fonts/SuisseIntl-Regular-WebS.woff2') format('woff2');
  font-weight: 400;
}
@font-face {
  font-family: 'SuisseIntl';
  src: url('../resources/fonts/SuisseIntl-Medium-WebS.woff2') format('woff2');
  font-weight: 500;
}

/* Base styling */
body {
  font-family: 'SuisseIntl', sans-serif;
  background-color: #0d0d0f;
  color: #e0e0e0;
}

.title-font {
  font-family: 'GT America', monospace;
  letter-spacing: 0.5px;
}

.subtitle-font {
  font-weight: 300;
}

.body-font {
  font-weight: 400;
}

.keyword {
  color: #b86eff;
  font-weight: 500;
}

/* Hero section */
.hero {
  height: 100vh;  /* use min-height? */
  background: radial-gradient(ellipse at bottom, #1a001f 0%, #0d0d0f 100%);
  position: relative;
  overflow: hidden;
}

.hero .overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 0, 25, 0.65);
  z-index: 1;
}

/* Background logo container */
.hero-logo-bg {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 75vmin; /* responsive size based on viewport */
  height: 75vmin;
  background: url("../resources/images/logo-crop-transparent.png") no-repeat center center;
  background-size: contain;
  opacity: 0.4; /* Lower opacity to blend better */
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none; /* ensures text selection/clicks work normally */
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 12px rgba(140, 60, 255, 0.2)); /* subtle glow */
  transition: transform 0.15s ease-out;
}

/* PARALLAX DOES NOT WORK IF THIS IS ENABLED
animations overlap/conflict, maybe parallax can be timed to occur later on */
@keyframes slowFade {
  from { opacity: 1; transform: translate(-50%, -48%) scale(0.80); }
  to   { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
}
.hero-logo-bg {
  animation: slowFade 2.0s ease-out forwards;
}


/* bolder h1 */
.hero h1 {
  font-family: 'GT America', sans-serif;
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 800;
  line-height: 1.1;
  background: linear-gradient(90deg, #c78bff, #8a2be2, #5f0da1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(157, 47, 255, 0.35);
}

.hero-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  opacity: 1;
}

.text-gradient {
  background: linear-gradient(90deg, #b86eff, #8f00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* Flame animation */
/* Wave general */
.hero-bg { position:absolute; bottom:0; left:0; width:100%; height:auto; z-index:0; }
.wave { transform-origin: center bottom; opacity:0.85; mix-blend-mode: screen; }

/* Slight different opacities to create depth */
.wave-a { opacity: 0.85; }
.wave-b { opacity: 0.7; }
.wave-c { opacity: 0.5; }

/* CSS-only gentle offset animation (for browsers that support animating d via CSS keyframes) */
@keyframes waveMoveA {
  0% { d: path("M0,520 C300,420 900,600 1440,440 L1440,600 L0,600 Z"); }
  50% { d: path("M0,540 C320,450 860,590 1440,420 L1440,600 L0,600 Z"); }
  100% { d: path("M0,500 C280,400 920,620 1440,440 L1440,600 L0,600 Z"); }
}
@keyframes waveMoveB {
  0% { d: path("M0,540 C350,470 800,650 1440,440 L1440,600 L0,600 Z"); }
  50% { d: path("M0,560 C380,480 840,630 1440,450 L1440,600 L0,600 Z"); }
  100% { d: path("M0,520 C330,460 790,640 1440,430 L1440,600 L0,600 Z"); }
}
@keyframes waveMoveC {
  0% { d: path("M0,500 C280,430 920,620 1440,420 L1440,600 L0,600 Z"); }
  50% { d: path("M0,520 C300,450 900,600 1440,430 L1440,600 L0,600 Z"); }
  100% { d: path("M0,480 C260,420 940,640 1440,410 L1440,600 L0,600 Z"); }
}

/* try to apply the animations but keep duration long and subtle */
.wave-a { animation: waveMoveA 14s ease-in-out infinite alternate; }
.wave-b { animation: waveMoveB 12s ease-in-out infinite alternate; }
.wave-c { animation: waveMoveC 16s ease-in-out infinite alternate; }
/*.wave-d { animation: waveMoveD 18s ease-in-out infinite alternate; }*/

/* small blur already applied via filter in SVG defs; ensure responsive hero text remains above waves */
.hero .container {
  position: relative;
  z-index: 2;
}

/* Buttons */
.btn-outline-light {
  border-width: 2px;
  transition: all 0.25s ease;
}
.btn-outline-light:hover {
  background: #b86eff;
  border-color: #b86eff;
  color: #fff;
}

/* Footer */
footer {
  background: #0b0b0d;
}