/*
 * Global styles for the Fran Illanes coming‑soon page.
 *
 * A dark, minimalist palette ensures all focus is on the logo
 * and message. Animations are kept subtle so they don’t distract
 * from the content but still convey a sense of anticipation. The
 * Blank typeface is loaded from a CDN (defined in index.html) and
 * applied consistently across headings.
 */

/* Reset margin and padding, set default background */
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  color: #fff;
  font-family: 'blank', sans-serif;
  overflow: hidden; /* hide scrollbars during intro */
}

/* Container that holds the main content; hidden until intro fades */
.content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  text-align: center;
  opacity: 0; /* initially hidden, shown via JS after intro */
  transition: opacity 0.6s ease-in-out;
}

/* Logo styling with fade‑in and slight scale animation */
.fi-logo {
  width: min(40vmin, 350px);
  height: auto;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeInLogo 1.8s ease-out forwards;
  animation-delay: 1.0s;
}

@keyframes fadeInLogo {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Heading container; actual letters are inserted via JS */
.coming-soon {
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 1.2;
}

/* Individual letter style with fade‑in and glitch effect */
.glitch-letter {
  position: relative;
  display: inline-block;
  font-size: clamp(2rem, 8vw, 7rem);
  letter-spacing: 0.05em;
  color: #ffffff;
  opacity: 0;
  animation-name: fadeIn;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pseudo‑elements create the color offsets for the glitch effect.
 * Each inherits the letter via the data‑text attribute set in JS. */
.glitch-letter::before,
.glitch-letter::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.7;
  mix-blend-mode: normal;
}

.glitch-letter::before {
  color: #00ffea;
  text-shadow: -2px 0 magenta;
  z-index: -1;
  /* Run the glitch animation only twice (forward and reverse) and
     inherit the delay from the parent letter so it starts when the
     letter appears.  After finishing the animation the pseudo element
     will hold its final state (opacity 0) thanks to forwards fill. */
  animation: glitch-anim-1 2.5s 2 linear alternate-reverse forwards;
  animation-delay: inherit;
}

.glitch-letter::after {
  color: #ff00f2;
  text-shadow: 2px 0 cyan;
  z-index: -2;
  /* As above, limit the iterations and use inherit to sync the start. */
  animation: glitch-anim-2 3s 2 linear alternate-reverse forwards;
  animation-delay: inherit;
}

/* Keyframes produce randomised clipping and movement for the glitch. */
@keyframes glitch-anim-1 {
  0% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(-2px, -2px);
  }
  20% {
    clip-path: inset(10% 0 85% 0);
    transform: translate(2px, -2px);
  }
  40% {
    clip-path: inset(30% 0 60% 0);
    transform: translate(-2px, 2px);
  }
  60% {
    clip-path: inset(5% 0 85% 0);
    transform: translate(2px, 2px);
  }
  80% {
    clip-path: inset(60% 0 20% 0);
    transform: translate(-2px, -2px);
  }
  100% {
    clip-path: inset(70% 0 15% 0);
    transform: translate(0, 0);
    opacity: 0; /* fade out the pseudo element at the end */
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip-path: inset(10% 0 80% 0);
    transform: translate(2px, 2px);
  }
  20% {
    clip-path: inset(30% 0 50% 0);
    transform: translate(-2px, 2px);
  }
  40% {
    clip-path: inset(80% 0 10% 0);
    transform: translate(2px, -2px);
  }
  60% {
    clip-path: inset(25% 0 65% 0);
    transform: translate(-2px, -2px);
  }
  80% {
    clip-path: inset(90% 0 5% 0);
    transform: translate(2px, -2px);
  }
  100% {
    clip-path: inset(20% 0 70% 0);
    transform: translate(-2px, 2px);
    opacity: 0;
  }
}

/* Instagram logo fade‑in after all letters appear */
.instagram-logo {
  width: min(12vmin, 130px);
  height: auto;
  display: block;
  margin-top: 2rem;
  opacity: 0;
  animation: fadeInInstagram 1.5s ease-out forwards;
}

@keyframes fadeInInstagram {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Intro rectangle occupies entire viewport and displays a vertical
 * rectangle reminiscent of the Blank typeface’s “O”. It fades away
 * automatically via keyframes defined below. */
/*
 * Intro overlay:
 * A full‑screen black container that holds the animated vertical bar.  The
 * bar grows from nothing to fill the viewport height, evoking the
 * elongated “O” shape from the Blank typeface.  Once the bar has
 * finished growing the overlay gradually fades out, revealing the main
 * content beneath.  The durations are deliberately long to build
 * anticipation.
 */
.intro-rect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  /* Extend the fade to allow the bar to complete before the overlay
     disappears.  Duration synchronises with barGrow below. */
  animation: introFade 4s ease forwards;
}

/* Hide the old bar animation when an intro letter is present.  This
   prevents the vertical bar from showing behind the giant “O”. */
.intro-rect::after {
  display: none;
}

/*
 * Giant “O” letter that appears at the very start of the page.  It
 * scales up dramatically to simulate zooming through the opening of
 * the character.  Once the scaling completes the overlay fades and
 * the rest of the content is revealed by JavaScript.  The letter is
 * centred both horizontally and vertically by the intro container.
 */
.intro-o {
  font-family: 'blank', sans-serif;
  font-size: 40vmin;
  line-height: 1;
  color: #fff;
  opacity: 1;
  animation: zoomO 3.5s ease-in-out forwards;
}

@keyframes zoomO {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  80% {
    transform: scale(12);
    opacity: 1;
  }
  100% {
    transform: scale(18);
    opacity: 0;
  }
}

/* The vertical bar itself: nested pseudo-element of intro-rect */
/*
 * The vertical bar.  It starts at zero height and grows to fill the
 * viewport vertically.  The width is slightly wider to emphasise the
 * shape.  Adjust the duration to control how fast the bar appears.
 */
.intro-rect::after {
  content: '';
  display: block;
  background-color: #fff;
  width: 4vmin;
  height: 0;
  animation: barGrow 2.5s ease-in-out forwards;
}

@keyframes barGrow {
  0% {
    height: 0;
  }
  100% {
    /* fill the viewport height to give the feeling of entering the page */
    height: 100vmin;
  }
}

@keyframes introFade {
  0% {
    opacity: 1;
  }
  /* Keep the overlay fully opaque for most of the bar growth.  The fade
     only begins toward the end of the animation to ensure the bar is
     visible. */
  85% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}