/* OP Intro v3 — Black → White "O expands" minimalist opening
   - No company name included
   - Designed to blend into clean, modern, white websites
*/

:root{
  --op3-z: 99999;
  --op3-ease-out: cubic-bezier(.16,1,.3,1);
  --op3-ease-in: cubic-bezier(.7,0,.84,0);
}

.op3, .op3 *{
  box-sizing: border-box;
}

.op3{
  position: fixed;
  inset: 0;
  z-index: var(--op3-z);
  pointer-events: auto;
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  isolation: isolate;
  overflow: hidden;
  opacity: 1;
  /* Fade out soon after the white bridge completes (avoid lingering blank white). */
  animation: op3-out 360ms var(--op3-ease-out) forwards;
  animation-delay: 2.50s;
}

@keyframes op3-out{
  to { opacity: 0; }
}

/* Background layers */
.op3-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.op3-bg--black{
  background:
    radial-gradient(1200px 700px at 50% 44%, rgba(255,255,255,.09), rgba(0,0,0,1) 60%),
    radial-gradient(900px 560px at 40% 20%, rgba(255,255,255,.05), rgba(0,0,0,0) 60%),
    #000;
  opacity: 1;
  animation: op3-black-out 520ms var(--op3-ease-out) forwards;
  animation-delay: 1.96s;
}
@keyframes op3-black-out{
  to{ opacity: 0; }
}

.op3-bg--white{
  background:
    radial-gradient(1200px 760px at 50% 40%, rgba(0,0,0,.05), rgba(255,255,255,1) 58%),
    #fff;
  opacity: 0;
  animation: op3-white-in 520ms var(--op3-ease-out) forwards;
  animation-delay: 1.96s;
}
@keyframes op3-white-in{
  to{ opacity: 1; }
}

/* Fine grain (subtle, static) */
.op3-grain{
  position: absolute;
  inset: -20%;
  z-index: 2;
  opacity: .10;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  transform: rotate(2deg);
}

/* Center stage */
.op3-stage{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
}

/* Word */
.op3-word{
  display: inline-flex;
  align-items: center;
  gap: .18em;
  font-size: clamp(44px, 7.2vw, 84px);
  font-weight: 320;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  transform: translateZ(0);
}

/* Letters share the same entrance */
.op3-letter, .op3-ring{
  display: inline-block;
  opacity: 0;
  transform: translate3d(0,14px,0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation-name: op3-letter-in, op3-letter-out;
  animation-duration: 760ms, 260ms;
  animation-timing-function: var(--op3-ease-out), var(--op3-ease-in);
  animation-fill-mode: forwards, forwards;
  animation-delay: calc(180ms + var(--i) * 70ms), 1.14s;
}

@keyframes op3-letter-in{
  to{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}
@keyframes op3-letter-out{
  to{
    opacity: 0;
    transform: translate3d(0,-6px,0);
  }
}

/* Ring "O" */
.op3-ring{
  position: relative;
  width: .86em;
  height: .86em;
  border-radius: 999px;
  border: 0.055em solid rgba(255,255,255,.94);
  box-shadow: 0 0 0 rgba(255,255,255,0);
  transform: translate3d(0,14px,0) scale(.98);
  /* Keep the ring a hair longer than other letters for the handoff into the zoom circle */
  animation-delay: calc(180ms + var(--i) * 70ms), 1.22s;
}

.op3-ring::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px;
  height: 2px;
  background: rgba(255,255,255,.85);
  border-radius: 99px;
  transform: translate(-50%,-50%);
  opacity: 0;
  animation: op3-dot 240ms var(--op3-ease-out) forwards;
  animation-delay: 960ms;
}
@keyframes op3-dot{
  to{ opacity: .75; }
}

/* Scan bar (minimal, dynamic accent) */
.op3-scan{
  position: absolute;
  top: 50%;
  left: -30vw;
  width: 26vw;
  height: 2px;
  transform: translateY(-50%);
  opacity: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.55),
    rgba(255,255,255,0));
  filter: blur(.2px);
  mix-blend-mode: screen;
  animation: op3-scan 820ms var(--op3-ease-out) forwards;
  animation-delay: 720ms;
  z-index: 4;
}

@keyframes op3-scan{
  0%{ opacity: 0; transform: translate(-10vw,-50%); }
  15%{ opacity: .8; }
  100%{ opacity: 0; transform: translate(130vw,-50%); }
}

/* The expanding "O" wipe */
.op3-zoom{
  position: absolute;
  left: var(--op3-ox, 50%);
  top: var(--op3-oy, 50%);
  width: var(--op3-osize, 72px);
  height: var(--op3-osize, 72px);
  border-radius: 999px;
  background: #fff;
  z-index: 6;
  transform: translate(-50%,-50%) scale(.92);
  opacity: 0;
  box-shadow: 0 0 0 rgba(255,255,255,0);
  animation: op3-zoom 1120ms var(--op3-ease-out) forwards;
  animation-delay: 1.20s;
  will-change: transform, opacity;
}

@keyframes op3-zoom{
  0%{
    opacity: 0;
    transform: translate(-50%,-50%) scale(.92);
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }
  12%{
    opacity: 1;
    transform: translate(-50%,-50%) scale(1);
    box-shadow: 0 0 28px rgba(255,255,255,.18);
  }
  78%{
    opacity: 1;
    transform: translate(-50%,-50%) scale(var(--op3-oscale, 24));
    box-shadow: 0 0 0 rgba(255,255,255,0);
  }
  100%{
    opacity: 1;
    transform: translate(-50%,-50%) scale(var(--op3-oscale, 24));
  }
}

/* Skip button (very subtle) */
.op3-skip{
  position: absolute;
  right: 18px;
  bottom: 16px;
  z-index: 10;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 240ms var(--op3-ease-out), transform 240ms var(--op3-ease-out), background 240ms var(--op3-ease-out);
  /* Appear after the initial reveal (so it's not visually noisy). */
  animation: op3-skip-in 260ms var(--op3-ease-out) forwards;
  animation-delay: 700ms;
}
@keyframes op3-skip-in{
  to{ opacity: 1; transform: translateY(0px); }
}
.op3-skip:hover{
  background: rgba(255,255,255,.10);
}

/* Click-to-skip hint */
.op3-hint{
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 10;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.55);
  opacity: 0;
  animation: op3-hint-in 260ms var(--op3-ease-out) forwards;
  animation-delay: 980ms;
}
@keyframes op3-hint-in{
  to{ opacity: 1; }
}

/* Skip mode (fast exit) */
.op3.op3--skip{
  animation: none;
  opacity: 0;
  transition: opacity 360ms var(--op3-ease-out);
}

.op3.op3--skip .op3-bg--black,
.op3.op3--skip .op3-bg--white,
.op3.op3--skip .op3-grain,
.op3.op3--skip .op3-stage,
.op3.op3--skip .op3-zoom{
  animation: none !important;
}

@media (prefers-reduced-motion: reduce){
  .op3{
    animation: none;
  }
  .op3-bg--black,
  .op3-bg--white,
  .op3-grain,
  .op3-scan,
  .op3-zoom,
  .op3-letter, .op3-ring{
    animation: none !important;
  }
}