/* ========================================
   ETRIENTE — FRONT PAGE
======================================== */

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


/* ========================================
   BODY
======================================== */

html,
body {
  width: 100%;
  height: 100%;
}

body {
  overflow: hidden;
  background: #dce8ee;
  font-family: Georgia, serif;
}


/* ========================================
   MAIN PAGE
======================================== */

.etriente {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  isolation: isolate;
}


/* ========================================
   FULL BACKGROUND
======================================== */

.front-bg {
  position: absolute;

  inset: -12px;

  background-image: url("front.png");

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  z-index: 1;

  filter: blur(8px);

  transform: scale(1.02);

  transition:
    filter 0.7s ease,
    transform 0.7s ease;

  pointer-events: none;
}


/* ========================================
   SHARP BACKGROUND
======================================== */

.etriente.loaded .front-bg {

  filter: blur(0);

  transform: scale(1);

}


/* ========================================
   ETRIENTE TITLE
======================================== */

.etriente-title {

  position: absolute;

  left: 50%;
  top: 35%;

  transform:
    translate(-50%, -50%);

  z-index: 20;

  display: flex;

  align-items: center;
  justify-content: center;

  gap: 1px;

  white-space: nowrap;

  font-family:
    "𝔉𝔯𝔞𝔨𝔱𝔲𝔯",
    Georgia,
    serif;

  font-size:
    clamp(35px, 5.2vw, 76px);

  font-weight: bold;

  letter-spacing: 1px;

  color: #174c78;

  text-shadow:
    1px 1px 0 #f7f5ee,
    -1px -1px 0 #f7f5ee,
    0 2px 5px rgba(12, 48, 75, 0.3);

  opacity: 0;

  transition:
    opacity 0.65s ease 0.05s;

  /* Keeps the hue safely behind the letters */
  isolation: isolate;
}


/* ========================================
   TITLE HUE
======================================== */

.etriente-title::before {

  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 135%;
  height: 180%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,

      rgba(65, 125, 170, 0.45) 0%,

      rgba(65, 125, 170, 0.28) 35%,

      rgba(65, 125, 170, 0.12) 58%,

      transparent 78%
    );

  filter: blur(22px);

  z-index: -1;

  pointer-events: none;
}


/* ========================================
   CURVED TITLE LETTERS
======================================== */

.etriente-title span {

  display: inline-block;

}


/* ========================================
   E
======================================== */

.etriente-title span:nth-child(1) {

  transform:
    translateY(25px)
    rotate(-14deg);

}


/* ========================================
   T
======================================== */

.etriente-title span:nth-child(2) {

  transform:
    translateY(15px)
    rotate(-8deg);

}


/* ========================================
   R
======================================== */

.etriente-title span:nth-child(3) {

  transform:
    translateY(7px)
    rotate(-5deg);

}


/* ========================================
   I
======================================== */

.etriente-title span:nth-child(4) {

  transform:
    translateY(4px)
    rotate(-3deg);

}


/* ========================================
   E
======================================== */

.etriente-title span:nth-child(5) {

  transform:
    translateY(4px)
    rotate(0deg);

}


/* ========================================
   N
======================================== */

.etriente-title span:nth-child(6) {

  transform:
    translateY(6px)
    rotate(4deg);

}


/* ========================================
   T
======================================== */

.etriente-title span:nth-child(7) {

  transform:
    translateY(15px)
    rotate(12deg);

}


/* ========================================
   E
======================================== */

.etriente-title span:nth-child(8) {

  transform:
    translateY(28px)
    rotate(16deg);

}


/* ========================================
   SHOW TITLE
======================================== */

.etriente.loaded .etriente-title {

  opacity: 1;

}


/* ========================================
   VERY GENTLE TITLE WIGGLE
======================================== */

.etriente-title {

  animation: titleTinyWiggle 4s ease-in-out infinite;

}


@keyframes titleTinyWiggle {

  0% {
    rotate: 0deg;
  }

  25% {
    rotate: -0.4deg;
  }

  50% {
    rotate: 0.4deg;
  }

  75% {
    rotate: -0.3deg;
  }

  100% {
    rotate: 0deg;
  }

}


/* ========================================
   DESKTOP NOTE
======================================== */

.desktop-note {

  position: absolute;

  left: 50%;
  top: 9%;

  transform:
    translateX(-50%)
    rotate(0deg);

  z-index: 20;

  white-space: nowrap;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(9px, 1.1vw, 17px);

  font-style: italic;

  letter-spacing: 1px;

  color: #214e75;

  text-shadow:
    0 1px 2px
    rgba(255, 255, 255, 0.7);

  opacity: 0;

  transition:
    opacity 0.7s ease 0.25s;

}


/* ========================================
   SHOW DESKTOP NOTE
======================================== */

.etriente.loaded .desktop-note {

  opacity: 1;

}


/* ========================================
   LITTLE WORLD PAPER
======================================== */
/* ========================================
   LITTLE WORLD PAPER
======================================== */

.world-note {
  position: absolute;

  left: 75%;
  top: 53%;

  width: 18%;

  z-index: 20;

  text-align: center;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(6px, 1.05vw, 12px);

  font-weight: 600;

  line-height: 1.12;

  color: #214e75;

  transform:
    translate(-50%, -50%)
    rotate(15deg);

  opacity: 0;

  transition:
    opacity 0.65s ease 0.15s;
}


/* ========================================
   SHOW WORLD NOTE
======================================== */

.etriente.loaded .world-note {
  opacity: 1;
}

/* ========================================
   SEAL BUTTON
======================================== */

.seal-button {

  position: absolute;

  left: 50%;
  top: 58%;

  transform:
    translate(-50%, -50%)
    scale(0.7);

  z-index: 30;

  display: block;

  width:
    clamp(65px, 6vw, 100px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  text-decoration: none;

  transition:
    opacity 0.35s ease 0.05s,
    transform 0.45s cubic-bezier(.2, 1.3, .3, 1),
    visibility 0s linear 0.45s;

}


/* ========================================
   SEAL HUE
======================================== */


/* ========================================
   WHITE HUE BEHIND SEAL
======================================== */

.seal-button::before {

  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 180%;
  height: 180%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,

      rgba(255, 255, 255, 0.65) 0%,

      rgba(255, 255, 255, 0.42) 35%,

      rgba(255, 255, 255, 0.20) 58%,

      transparent 78%
    );

  filter: blur(16px);

  z-index: 0;

  pointer-events: none;

}


/* ========================================
   SEAL IMAGE
======================================== */

.seal-button img {

  display: block;

  position: relative;

  z-index: 1;

  width: 100%;
  height: auto;

  background: transparent;

  filter:
    drop-shadow(
      0 5px 7px
      rgba(15, 52, 78, 0.28)
    );

  animation:
    sealFloat 3s ease-in-out infinite;

}


/* ========================================
   SHOW SEAL
======================================== */

.etriente.loaded .seal-button {

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translate(-50%, -50%)
    scale(1);

  transition:
    opacity 0.35s ease,
    transform 0.45s cubic-bezier(.2, 1.3, .3, 1),
    visibility 0s;

}


/* ========================================
   SEAL HOVER
======================================== */

.etriente.loaded .seal-button:hover {

  transform:
    translate(-50%, -50%)
    scale(1.07);

}


/* ========================================
   GENTLE SEAL SWAY
======================================== */

@keyframes sealFloat {

  0% {

    transform:
      translateY(0)
      rotate(-1deg);

  }

  50% {

    transform:
      translateY(-5px)
      rotate(1.5deg);

  }

  100% {

    transform:
      translateY(0)
      rotate(-1deg);

  }

}


/* ========================================
   SEAL FLIP
======================================== */

.seal-button.flipping img {

  animation:
    sealFlip 0.65s ease-in-out forwards;

}


/* ========================================
   FLIP ANIMATION
======================================== */

@keyframes sealFlip {

  0% {

    transform:
      rotateY(0deg)
      scale(1);

  }

  45% {

    transform:
      rotateY(180deg)
      scale(1.08);

  }

  100% {

    transform:
      rotateY(360deg)
      scale(1);

  }

}


/* ========================================
   SEAL FLIES 360° AROUND TITLE
======================================== */

.seal-button.flying {

  animation:
    sealOrbit 1.8s ease-in-out forwards;

  pointer-events: none;

}


/* ========================================
   FULL 360° ORBIT
======================================== */

@keyframes sealOrbit {

  /* Starting position — underneath title */
  0% {

    transform:
      translate(-50%, -50%)
      translate(0px, 0px)
      rotate(0deg)
      scale(1);

  }


  /* Bottom → left */
  25% {

    transform:
      translate(-50%, -50%)
      translate(-210px, -115px)
      rotate(-90deg)
      scale(1.02);

  }


  /* Left → top */
  50% {

    transform:
      translate(-50%, -50%)
      translate(0px, -230px)
      rotate(-180deg)
      scale(1.05);

  }


  /* Top → right */
  75% {

    transform:
      translate(-50%, -50%)
      translate(210px, -115px)
      rotate(-270deg)
      scale(1.02);

  }


  /* Right → back underneath */
  100% {

    transform:
      translate(-50%, -50%)
      translate(0px, 0px)
      rotate(-360deg)
      scale(0.95);

    opacity: 0;

  }

}


/* ========================================
   OPENING OVERLAY
======================================== */

.opening {

  position: fixed;

  inset: 0;

  z-index: 100;

  pointer-events: none;

  opacity: 1;

}


/* ========================================
   BLUE GLOW
======================================== */

.blue-glow {

  position: absolute;

  left: 50%;
  top: 58%;

  width: 100px;
  height: 100px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,

      rgba(65, 125, 170, 0.48),

      rgba(65, 125, 170, 0.20) 45%,

      transparent 72%
    );

  filter: blur(10px);

  animation:
    glowPulse 1s ease-in-out infinite;

}


/* ========================================
   GLOW ANIMATION
======================================== */

@keyframes glowPulse {

  0% {

    transform:
      translate(-50%, -50%)
      scale(0.9);

    opacity: 0.65;

  }

  50% {

    transform:
      translate(-50%, -50%)
      scale(1.08);

    opacity: 1;

  }

  100% {

    transform:
      translate(-50%, -50%)
      scale(0.9);

    opacity: 0.65;

  }

}


/* ========================================
   WHITE HUG
======================================== */

.hug {

  position: absolute;

  left: 50%;
  top: 58%;

  transform:
    translate(-50%, -50%)
    scale(1);

  z-index: 110;

  font-size: 34px;

  line-height: 1;

  filter:
    grayscale(1)
    brightness(0)
    invert(1)
    drop-shadow(
      0 0 5px
      rgba(255, 255, 255, 0.8)
    );

  opacity: 1;

  transition:
    opacity 0.28s ease,
    transform 0.35s cubic-bezier(.7, -.4, .2, 1.4);

}


/* ========================================
   HUG TRANSITION
======================================== */

.opening.transform .hug {

  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(0.15);

}


/* ========================================
   OPENING GLOW DISAPPEARS
======================================== */

.opening.transform .blue-glow {

  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(0.35);

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;

}LITTLE WOEL
    font-size: 2.8vw;

  }


  .seal-button {

    width: 15vw;

  }


  .hug {

    font-size: 30px;

  }


  .blue-glow {

    width: 80px;
    height: 80px;

  }
/* ========================================
   WITCH CURSOR
======================================== */

html,
body,
body *,
a,
button,
.seal-button("/seal.png") 0 0, auto !important;
}
}LITTLE WOEL