/* index_style.css: front-page decorations */
:root {
  --gold: #D4AF37; 
}

/* ==========================================================================
   body layout (ordering)
   ========================================================================== */
body {
  position: relative;
  color: white; 
  /* background — midnight weave */
  background-color: #0E2A2A;
  background-image:
    repeating-linear-gradient(45deg,  rgba(255,255,255,.045) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.03)  0 1px, transparent 1px 20px);
  background-size: 40px 40px;
  background-attachment: fixed;
  
  /* flex layout to swap header and main */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  order: 2; /* header below main visually */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 18vw; /* pushes the title  below the translated frames */
  padding-bottom: 60px; /* space from bottom of screen */
}

main {
  order: 1; /* pushes gallery above header  */
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0;
  padding: 0; /* no top gap */
}

/* ==========================================================================
   title
   ========================================================================== */
.ornamental-img {
  width: 65px;
  height: 65px;
  vertical-align: text-bottom;
  margin-right: 5px;
}
.site-title {
  font-family: "Cinzel Decorative", serif;
  font-weight: 500;
  color: white;
  margin: 0 0 20px 0; 
  font-size: 2.5em;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 0.8;
}

/* ==========================================================================
   stickers toggle button
   ========================================================================== */
.sticker-toggle {
  display: block;
  margin: 0; 
  padding: 8px 24px;
  background: transparent;
  border: 2px solid white;
  border-radius: 2px;
  color: white;
  font-family: "Cinzel Decorative", serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  position: relative;
  z-index: 60;
  transition: transform 0.7s ease, background 0.7s ease, color 0.7s ease;
}
.sticker-toggle:hover {
  transform: scale(1.05);
}
.sticker-toggle[aria-pressed="true"] {
  background: white;
  color: #14241D;
}

/* ==========================================================================
   gallery
   ========================================================================== */
.gallery-wall {
  box-sizing: border-box;
  padding-left: 5vw;
  padding-right: 5vw;
}
#frame-art { transform: translate(0vw, 6.5vw) scale(1) rotate(0deg); z-index: 1; }
#frame-music { transform: translate(0vw, 13vw) rotate(0deg); z-index: 2; }
#frame-accessibility { transform: translate(0vw, 7vw) scale(1) rotate(0deg); z-index: 0; }
#frame-shrines { transform: translate(0vw, 11vw) rotate(0deg); z-index: 6; }
#frame-quizzes { transform: translate(0vw, 8vw) rotate(0deg); z-index: 4; }
#frame-wonders { transform: translate(0vw, 15vw) rotate(0deg); z-index: 5; }
#frame-opinions { transform: translate(0vw, 9.5vw) rotate(0deg); z-index: 3; }
#frame-poetry { transform: translate(0vw, 14.5vw) rotate(0deg); z-index: 7; }

.gallery-link {
  text-decoration: none;
}

/* ==========================================================================
   side widgets (glued to the screen)
   ========================================================================== */
.side-widgets {
  position: fixed; /* scroll */
  bottom: 15px; 
  left: 15px;
  width: 90px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center; 
  gap: 25px; 
}
.side-widgets .interactive-widget {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}
.widget-label {
  display: block;
  text-align: center;
  color: white; 
  font-family: "Cinzel Decorative", serif;
  font-size: 1em;
  font-weight: bold;
}

#widget-about   { width: 80px; }
#widget-credits { width: 80px; }
#widget-log     { width: 75px; }
#widget-sitemap { width: 80px; } /* Sitemap inherits widget widths */


/* ==========================================================================
   stickers (shifted up by 15%)
   ========================================================================== */
.bg-sticker {
  display: block;
  min-width: 100px;
}
body.stickers-off .bg-sticker {
  display: none;
}

/* Base Stickers */
#flower-1 { /* pink hibiscus */ top: 41.5%; left: 50%; width: 15vw; transform: rotate(148deg); }
#flower-2 { /* sunflower */ top: 13%; left: 31%; width: 20vw; transform: rotate(25deg); z-index: 0; }
#flower-3 { /* red tube flower */ top: 2.5%; left: 75%; width: 12.5vw; transform: rotate(210deg); }
#flower-4 { /* pink rosy */ top: 62%; left: 18.5%; width: 15vw; transform: rotate(-40deg); }
#flower-5 { /* tuberose copy */ top: 41%; left: 9%; width: 14vw; transform: rotate(155deg); }
#flower-6 { /* yellow rose */ top: 32%; left: 80%; width: 15vw; transform: rotate(16deg); }
#flower-7 { /* pink rosy duplicate */ top: 69.5%; left: 66.5%; width: 15vw; transform: rotate(-310deg); }
#flower-8 { /* sunflower copy */ top: 4%; left: 39%; width: 15.8vw; transform: rotate(125deg); }
#flower-9 { /* hibiscus duplicate */ top: 57%; left: 41%; width: 15vw; transform: rotate(40deg); }
#flower-10 { /* yellow rose duplicate */ top: 1.5%; left: 10%; width: 15vw; transform: scaleX(-1); }

#butterfly-1 { /* grey closed */ top: 6.5%; left: 41%; width: 11vw; transform: rotate(-28deg); z-index: -2; }
#butterfly-2 { /* grey wing open */ top: 30.5%; left: 30%; width: 13.6vw; transform: rotate(18deg); }
#butterfly-3 { /* red and blue */ top: 2%; left: 54%; width: 15.8vw; transform: rotate(30deg); }
#butterfly-4 { /* yellow */ top: 0.5%; left: 26%; width: 15vw; transform: rotate(-30deg);} /* */
#butterfly-5 { /* purple */ top: 27.5%; left: 9.5%; width: 15.6vw; transform: rotate(35deg); }
#butterfly-6 { /* teal */ top: 32.5%; left: 61%; width: 15vw; transform: rotate(2deg); }
#butterfly-7 { /* orange */ top: 80%; left: 25%; width: 10vw; transform: rotate(40deg); }
#butterfly-8 { /* orange duplicate */ top: 17.25%; left: 83%; width: 11vw; transform: rotate(-60deg); }
#moth-1 { /* orange */ top: 83%; left: 70%; width: 13.3vw; transform: rotate(-130deg); }
#moth-2 { top: 58%; left: 78.5%; width: 15.2vw; transform: rotate(38deg); }



/* ==========================================================================
   music toggle
   ========================================================================== */
#music-toggle {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 120;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: transform 0.2s ease;
}
#music-toggle:hover {
  transform: scale(1.5);
}
.play-triangle {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  border-color: transparent transparent transparent gold;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
#music-toggle.playing .play-triangle {
  animation: musicPulse 1.5s ease-in-out infinite;
}
@keyframes musicPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ==========================================================================
   teleprompter
   ========================================================================== */
#teleprompter {
  position: fixed;
  right: 18px;
  top: 90px;
  bottom: 0;
  width: 44px;
  overflow: hidden;
  z-index: 110;
  pointer-events: none;
}
#teleprompter .tp-text {
  position: absolute;
  top: 100%;
  left: 12px;
  white-space: nowrap;
  font-family: "Cinzel Decorative", serif;
  font-weight: 400;
  color: white;
  font-size: 1rem;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  animation: teleprompt 38s linear infinite;
  text-decoration: none;
  pointer-events: auto;
  cursor: pointer;
}
#teleprompter .tp-text:hover {
  color: gold;
}
@keyframes teleprompt {
  from { top: 100%; }
  to   { top: -120%; }
}
@media (prefers-reduced-motion: reduce) {
  #teleprompter .tp-text {
    animation: none;
    top: 40%;
  }
}


/* ==========================================================================
   Web Friends Marquee
   ========================================================================== */
.web-friends-marquee {
  width: 100%;
  max-width: 600px; /* Keeps the scrolling area  contained */
  overflow: hidden;
  white-space: nowrap;
  margin-top: 35px; /* space between the sticker button and other buttons */
  z-index: 60;
  position: relative;
}

.marquee-content {
  display: inline-block;
  padding-left: 100%; /* Starts the buttons completely off-screen to the right */
  animation: web-friends-scroll 100s linear infinite; /*  extremely slow */
}

/* Pauses  scrolling */
.marquee-content:hover {
  animation-play-state: paused; 
}

.marquee-content a {
  display: inline-block;
  margin: 0 10px; /* Spacing between  buttons */
  transition: transform 0.2s ease;
}

/* buttons a tiny pop effect when hovered */
.marquee-content a:hover {
  transform: scale(1.05);
}

.marquee-content img {
  display: block;
  /* Standard web badge size. Remove or adjust these if your images are a different size */
  width: 88px; 
  height: 31px;
  border: none;
  image-rendering: pixelated; /*  smaller GIFs looking crisp */
}

/* The right-to-left animation logic */
@keyframes web-friends-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Accessibility: Stop motion for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .marquee-content {
    animation: none;
    padding-left: 0;
    white-space: normal;
    text-align: center;
  }
}









/* ==========================================================================
   responsive overrides
   ========================================================================== */
@media (max-width: 900px) {
  .side-widgets {
    position: relative; /* On smaller screens,  back into the normal flow so they don't block content */
    bottom: auto;
    left: auto;
    margin: 20px auto 40px; 
  }
  .bg-sticker { display: none; } 
}
@media (max-width: 600px) {
  #teleprompter { display: none; } 
}