/*
  Code written and maintained by Ethan Evans
  Do not redistribute without permission
*/

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

html{
  /* Helps the “rubber band” / overscroll look nicer on iOS */
  background: #fff;
}

body{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  overflow-x: hidden;

  /* IMPORTANT: css/ethan-style.css is inside /css so we need ../assets */
  background: url("../assets/bg.jpg") center / cover no-repeat;
  min-height: 100vh;
  min-height: 100svh; /* iOS-friendly viewport height */
}

/* Dark overlay (keeps the vibe) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.42);
  z-index: 0;              /* keep it ABOVE the bg but BELOW everything else */
  pointer-events: none;
}

/* Noterix canvas */
#matrixCanvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;              /* above overlay, behind content */
  pointer-events: none;
  opacity: 0.34;
}

/* Main layout */
.hub{
  min-height: 100vh;
  min-height: 100svh; /* iOS */
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
  text-align: center;
  position: relative;
  z-index: 2; /* content above overlay + canvas */

  /* Helps keep content above iPhone bottom safe-area */
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.hub-inner{
  width: 100%;
  max-width: 560px;
  display:flex;
  flex-direction: column;
  align-items: center;
}

/* Logo */
.gp-logo-center{
  width: 100%;
  display:flex;
  justify-content:center;
  margin-bottom: 10px;
}

.gp-logo-image{
  width: min(560px, 92vw);
  height: auto;
  display:block;
  object-fit: contain;
  max-height: 26svh;

  filter:
    drop-shadow(0 6px 14px rgba(0,0,0,0.55))
    drop-shadow(0 18px 32px rgba(0,0,0,0.25));

  opacity: 0;
  transform: translateY(14px) scale(0.94);
  animation: logoIn 0.75s cubic-bezier(.2,.9,.2,1) forwards;
}

@keyframes logoIn{
  0%   { opacity: 0; transform: translateY(18px) scale(0.90); }
  60%  { opacity: 1; transform: translateY(0) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.subtitle{
  opacity: 0;
  transform: translateY(8px);
  animation: fadeUp 0.55s ease forwards;
  animation-delay: 0.18s;

  margin: 6px 0 18px;
  font-size: 1rem;
}

@keyframes fadeUp{
  to { opacity: 0.9; transform: translateY(0); }
}

/* Buttons */
.buttons{
  width: 100%;
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.btn{
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  position: relative;
  overflow: visible;

  opacity: 0;
  transform: translateY(12px);
  animation: btnIn 0.55s cubic-bezier(.2,.9,.2,1) forwards;

  background: rgba(25,25,25,0.72);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.12);

  /* NOTE: backdrop-filter can be buggy on some iOS combinations,
     but this version is mild and usually fine. */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.15s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;

  -webkit-tap-highlight-color: transparent;
}

@keyframes btnIn{
  to { opacity: 1; transform: translateY(0); }
}

.buttons .btn:nth-child(1){ animation-delay: 0.28s; }
.buttons .btn:nth-child(2){ animation-delay: 0.36s; }
.buttons .btn:nth-child(3){ animation-delay: 0.44s; }
.buttons .btn:nth-child(4){ animation-delay: 0.52s; }
.buttons .btn:nth-child(5){ animation-delay: 0.60s; }
.buttons .btn:nth-child(6){ animation-delay: 0.68s; }
.buttons .btn:nth-child(7){ animation-delay: 0.76s; }

.btn:hover{
  background: rgba(225,6,19,0.94);
  color: #fff;
  transform: translateY(-2px);

  border-color: rgba(225,6,19,0.65);
  box-shadow:
    0 0 0 1px rgba(225,6,19,0.35),
    0 10px 26px rgba(225,6,19,0.35),
    0 0 28px rgba(225,6,19,0.45);
}

.btn:active{
  background: rgba(225,6,19,1);
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(225,6,19,0.45),
    0 6px 18px rgba(225,6,19,0.32);
}

/* Button note “burst” */
.btn-note{
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  color: #000;
  opacity: 0;
  pointer-events:none;
  animation: notePop 650ms ease-out forwards;
}

@keyframes notePop{
  0%   { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.6); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ex), var(--ey)) scale(1.05); }
}

/* Socials */
.socials{
  margin-top: 18px;
  display:flex;
  justify-content:center;
  gap: 18px;

  /* Desktop can wrap, phones stay one line */
  flex-wrap: wrap;

  opacity: 0;
  transform: translateY(10px);
  animation: socialsIn 0.6s ease forwards;
  animation-delay: 0.92s;
}

@keyframes socialsIn{
  to { opacity: 1; transform: translateY(0); }
}

.social-item{
  width: 78px;
  display:flex;
  flex-direction: column;
  align-items:center;
  text-decoration:none;
  color:#fff;
  -webkit-tap-highlight-color: transparent;
}

.social-btn{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(30,30,30,0.72);
  border: 1px solid rgba(255,255,255,0.12);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  transition: transform .15s ease, background .15s ease;
}

.social-item:hover .social-btn{
  transform: translateY(-2px);
  background: rgba(45,45,45,0.85);
}

.social-label{
  margin-top: 6px;
  font-size: 0.68rem;
  opacity: 0.68;
  text-align:center;
  line-height: 1.1;
}

/* Make SVG icons consistent + stop them turning into “weird blocks” */
.social-btn svg{
  width: 20px;
  height: 20px;
  display: block;
}

.social-btn svg,
.social-btn svg *{
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.social-btn svg .gp-fill{
  fill:#fff !important;
  stroke:none !important;
}

/* Footer / copyright (if you have one in HTML) */
.footer{
  margin-top: 14px;
  opacity: 0.75;
  font-size: 0.9rem;
}

/* -----------------
   MOBILE TUNING
------------------ */
@media (max-width: 520px){
  .gp-logo-image{
    width: min(520px, 94vw);
    max-height: 22svh;
  }

  /* Keep socials in ONE LINE on phones */
  .socials{
    flex-wrap: nowrap;
    gap: 12px;
  }

  .social-item{
    width: 64px;
  }

  .social-btn{
    width: 40px;
    height: 40px;
  }

  .social-btn svg{
    width: 18px;
    height: 18px;
  }

  .social-label{
    font-size: 0.62rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #matrixCanvas{ display:none; }

  .gp-logo-image,
  .subtitle,
  .btn,
  .socials{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .btn,
  .social-btn{
    transition: none;
  }
}