/* style.css (FULL DROP-IN)
Put in: public_html/style.css

Fixes:
- Link centered and styled like disclaimer (so it won't default to purple/blue browser styling)
- Ensures page scroll works cleanly with two full-screen sections
*/
:root{
  --bg: #000;
  --fg: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  overflow-x:hidden;
}

.bg-vignette{
  position:fixed;
  inset:-20%;
  pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(255,255,255,0.06), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.06), rgba(0,0,0,0) 60%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.92) 78%);
  filter: blur(0.2px);
  z-index:0;
}

.page{
  position:relative;
  z-index:1;
}

/* Fullscreen sections */
.section{
  min-height: 100vh;
}

/* HOME */
.home{
  display:flex;
  flex-direction:column;
}

/* Top banner */
.top{
  width:100%;
  padding: clamp(14px, 2.6vh, 26px) 18px 0;
  display:flex;
  justify-content:center;
}

.bannerWrap{
  width: min(980px, 96vw);
  height: clamp(110px, 16vw, 220px);
  position:relative;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 16px 60px rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}

.bannerImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  user-select:none;
  -webkit-user-drag:none;
  opacity: 0.95;
  filter: saturate(1.05) contrast(1.05);
}

.bannerShade{
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.08), rgba(0,0,0,0.62));
}

.bannerContent{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: clamp(8px, 1.1vh, 12px);
  padding: 10px 16px;
}

/* ORANGE title */
.logoText{
  font-weight: 900;
  letter-spacing: 0.08em;
  font-size: clamp(30px, 4.2vw, 64px);
  line-height: 1;
  text-transform: uppercase;

  background: linear-gradient(180deg, #ffd19a, #ff7a18);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  text-shadow:
    0 0 10px rgba(255,140,40,0.60),
    0 0 18px rgba(255,140,40,0.35);
}

/* MORSE row (green) */
.morse{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(8px, 1.2vw, 14px);
}

.morse .dot,
.morse .dash{
  height: clamp(9px, 1.2vw, 14px);
  border-radius: 2px;

  background: linear-gradient(180deg, #b7ff8a, #31c44f);
  box-shadow:
    0 0 10px rgba(60,255,120,0.55),
    0 0 20px rgba(60,255,120,0.25);
  opacity:0.95;
}

.morse .dot{ width: clamp(9px, 1.2vw, 14px); }
.morse .dash{ width: clamp(24px, 3.0vw, 42px); }
.morse .gap{ width: clamp(18px, 2.4vw, 34px); height:1px; }

/* Center area */
.center{
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 18px;
}

.mapWrap{
  width: min(900px, 92vw);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 8px;
  text-align:center; /* guarantees link centers */
}

.mapImg{
  display:block;
  width: min(760px, 92vw);
  max-height: min(56vh, 520px);
  height: auto;
  object-fit: contain;
  user-select:none;
  -webkit-user-drag:none;
  opacity: 0.92;
  filter:
    drop-shadow(0 0 18px rgba(255,255,255,0.08))
    drop-shadow(0 0 40px rgba(255,255,255,0.04));
}

/* Link styled like disclaimer */
.mainLink{
  display:inline-block;           /* sits under image */
  margin: 2px auto 0;
  font-size: clamp(10px, 1.05vw, 12px);
  line-height: 1.35;
  color: rgba(90,160,255,0.75);
  text-decoration: underline;
  background: transparent;
}
.mainLink:visited{
  color: rgba(90,160,255,0.75);   /* prevents purple visited color */
}
.mainLink:hover{
  color: rgba(90,160,255,0.95);
}

/* Bottom disclaimer */
.bottom{
  padding: 10px 22px 18px;
  text-align:center;
}

.disclaimer{
  margin:0 auto 8px;
  width: min(1200px, 92vw);
  color: rgba(255,255,255,0.22);
  font-size: clamp(10px, 1.05vw, 12px);
  line-height: 1.35;
}

.contact{
  margin:0;
  color: rgba(255,255,255,0.22);
  font-size: clamp(10px, 1.05vw, 12px);
}

.email{
  color: rgba(90,160,255,0.75);
  text-decoration: none;
}
.email:hover{ text-decoration: underline; }

/* FANART */
.fanart{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 22px 18px;
}

.fanartInner{
  width: min(980px, 96vw);
  display:flex;
  flex-direction:column;
  gap: 14px;
}

.fanartTop{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
}

.fanartTitle{
  font-weight: 900;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  font-size: clamp(14px, 1.4vw, 18px);
}

.backLink{
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  text-decoration:none;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
}
.backLink:hover{
  color: rgba(255,255,255,0.70);
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.04);
}

.fanartFrame{
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  box-shadow: 0 18px 70px rgba(0,0,0,0.6);
  position:relative;
}

.fanartImg{
  width:100%;
  height:100%;
  object-fit: contain;
  user-select:none;
  -webkit-user-drag:none;
  opacity: 0.98;
  filter: drop-shadow(0 0 22px rgba(255,255,255,0.06));
  background: rgba(0,0,0,0.25);
  transition: opacity 180ms ease;
}

.fanartCaption{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}

.fanartNote{
  font-size: 11px;
  letter-spacing: 0.10em;
  color: rgba(255,255,255,0.22);
}

@media (max-height: 720px){
  .bannerWrap{ height: clamp(90px, 14vw, 160px); }
  .mapImg{ max-height: min(50vh, 420px); }
}