/* Base Component Styling from chickens.css */
.pirate-logo-wrapper {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow-anchor: none;
}

/* Authentic CBB vector line break styling */
.cbb-linebreak {
  fill: #ccc;
}

/* On desktop and widescreen:
   Maximize SVG logo height to fit available viewport height below page title,
   vertically centering the visible base component (through bottom vector line)
   so the gap above (page title to logo) equals the gap below (bottom line to viewport edge).
   Width scales naturally when viewport narrows, preserving aspect ratio.
   Mobile portrait view is completely untouched. */
@media (min-width: 992px) {
  .pirate-logo-wrapper {
    --avail-h: calc(100vh - var(--header-and-title-height, 166px) - 2.5rem);
    --logo-w: min(95vw, 1200px, calc(var(--avail-h) * (800 / 672)));
    width: var(--logo-w);
    /* Wrapper height strictly bounds the visible base component for perfect centering */
    height: calc(var(--logo-w) * (672 / 800));
    position: relative;
    z-index: 10;
    margin: 0 auto;
  }

  .pirate-logo-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .master-pirate-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
  }
}
.sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;}
.pirate-logo-container {
  position: relative;
  width: 100%;
  display: block;
}
.master-pirate-svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: none !important;
  overflow: visible;
  overflow-anchor: none;
}

.master-pirate-svg foreignObject {
  overflow: visible;
}

/* Typography */
.master-pirate-svg text {
  font-family: 'Battlesbridge', sans-serif;
  text-shadow: 2px 2px 0px rgba(0,0,0,1);
}
text.text-top, text.text-middle, text.text-bottom-1, text.text-bottom-2 {
  font-family: 'Battlesbridge';
  font-weight: 100;
}
text.text-top, text.text-bottom-1 {
  letter-spacing: 5px;
  font-size: 4.2em;
  position: relative;
}
text.text-est, text.text-loc, text.slogan {
  font-size: 1.75em;
  font-family: 'Copperplate' !important;
}
text.slogan {text-transform:uppercase;font-size:2.5em;letter-spacing:-1px;}
text.text-est tspan:first-of-type,
text.text-loc tspan:first-of-type {font-size:1.3em}
text.text-middle, text.text-est, text.text-loc {
  fill: #ccc !important;
}
text.text-middle {
  font-size: 25px;
  letter-spacing: 1px;
}
text.text-bottom-1 {
  letter-spacing: 10px;
}
text.text-bottom-2 {
  font-size: 28px;
  letter-spacing: 1px;
  fill: #ccc !important;
}

/* =========================================
   ANIMATION STYLES (When .is-animated is present)
   ========================================= */

/* 1. Background image fades in */
.is-animated .logo-bg-image {
  opacity: 0;
  animation: fadeInBg 2s ease-in-out forwards;
}

/* 2. Text elements fall in */
.is-animated .text-top {
  opacity: 0;
  transform: translateY(-50px);
  animation: dropIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s forwards;
}

.is-animated .text-middle,
.is-animated .text-est,
.is-animated .text-loc {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 1.5s forwards;
}

.is-animated .text-bottom-1 {
  opacity: 0;
  transform: translateY(50px);
  animation: riseUp 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.5s forwards;
}

.is-animated .text-bottom-2 {
  opacity: 0;
  transform: translateY(50px);
  animation: riseUp 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 3.5s forwards;
}

/* 3. Gradient Shimmer Effect */
.is-animated .gradient-text-overlay {
  opacity: 1;
  animation: fadeOutOverlay 1s cubic-bezier(0.4, 0, 0.2, 1) 4.5s forwards;
}

/* 4. IT'S YOUR fade in */
.is-animated .its-your-wrapper {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 4.0s forwards;
}

/* Static fallback for non-animated */
.gradient-text-overlay {
  opacity: 0; /* hidden by default when not animated */
}

@keyframes fadeInBg {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes dropIn {
  0% { opacity: 0; transform: translateY(-50px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes riseUp {
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOutOverlay {
  0% { opacity: 1; }
  50% { opacity: 1; filter: brightness(2) drop-shadow(0 0 10px white); } /* Metallic flash */
  100% { opacity: 0; filter: brightness(1); }
}

/* =========================================
   TEXT ROTATOR STYLES (SVG foreignObject)
   ========================================= */
.foreign-rotator-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.its-your-wrapper {
  text-align: center;
  font-family: var(--cotc-battlesbridge);
  text-transform: lowercase;
  font-size: 24px;
  color: #ccc;
  z-index: 20;
  filter: drop-shadow(2px 2px 0px rgba(0,0,0,1));
  margin-top: 0;
}
.its-your-wrapper .svg-inline--fa.fa-2xs {
  vertical-align: 0.1em;
}
.its-your-wrapper .st1 { height: 0.75em; width: 0.75em; }
.its-your-wrapper .st2 { height: 1.1em; width: 1.1em; }
.its-your-wrapper .st3 { height: 1.5em; width: 1.5em; }

.logo-text-rotator {
  font-family: var(--cotc-battlesbridge);
  text-transform: lowercase;
  font-weight: 100;
  z-index: 20;
  position: relative;
  width: 100%;
}

.rotator-dynamic-wrapper {
  height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.fire-text {
  font-size: 40px;
  font-weight: bold;
  color: #ccc;
  letter-spacing: 2px;
  perspective: 1200px;
  transform-style: preserve-3d;
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centering */
}

.fire-text span {
  display: inline-block;
  transform-origin: bottom; /* Hinge at the bottom for flip-down */
  backface-visibility: hidden;
  opacity: 0;
}

/* IDLE PHASE: Clean and Sharp */
.fire-text.phase-idle span {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
  color: #ccc;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.9);
}

/* ENTRY PHASE: Drop down + Red Burst */
.fire-text.phase-entry span {
  animation: dropBurst 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  animation-delay: var(--delay);
  opacity: 0;
  transform: translateY(-50px);
}

@keyframes dropBurst {
  0% { 
    opacity: 0; 
    transform: translateY(-50px); 
    color: #fff;
    text-shadow: 0 -10px 20px #cc2207, 0 -20px 40px #ff8000; 
  }
  40% { 
    opacity: 1; 
    transform: translateY(5px); 
    color: #fff;
    text-shadow: 0 0 30px #cc2207, 0 0 50px #ffcc00; 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0);
    color: #ccc;
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9); /* Sharpens up */
  }
}

/* EXIT PHASE: Sequential 3D Flip Down + Smoke */
.fire-text.phase-exit span {
  animation: flipSmoke 0.9s ease-in forwards;
  animation-delay: var(--delay);
  opacity: 1;
  transform: rotateX(0deg) translateY(0);
}

@keyframes flipSmoke {
  0% {
    transform: rotateX(0deg) translateY(0);
    opacity: 1;
    filter: blur(0);
    text-shadow: 2px 2px 5px rgba(0,0,0,0.9);
  }
  50% {
    transform: rotateX(90deg) translateY(10px); /* Tipping forward */
    opacity: 0.8;
    filter: blur(2px);
    text-shadow: 0 10px 20px rgba(150,150,150,0.8);
  }
  100% {
    transform: rotateX(180deg) translateY(30px); /* Fully flipped over and falling */
    opacity: 0;
    filter: blur(10px);
    text-shadow: 0 30px 40px rgba(50,50,50,0);
  }
}

/* =========================================
   FULLSCREEN ENTRANCE SPLASH OVERLAY
   ========================================= */
.cotc-entrance-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(ellipse at center, rgba(18, 18, 18, 0.94) 0%, rgba(0, 0, 0, 0.98) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99990;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

html.cotc-entrance-active {
  overflow: hidden !important;
}

/* While entrance overlay is active, completely hide navbar, top header, and page title */
html.cotc-entrance-active .cotc-main-nav,
html.cotc-entrance-active .cotc-header-wrapper,
html.cotc-entrance-active .cotc-top-header,
html.cotc-entrance-active #block-pirate-chickens-page-title {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

/* Ensure stacking context of main and cutout permits the logo to be on top of the overlay */
html.cotc-entrance-active main[role="main"],
html.cotc-entrance-active .parallax-foreground,
html.cotc-entrance-active .parallax-cutout:first-of-type {
  z-index: 99995 !important;
}

/* Once dismissing, fade the navbar, header, and page title back in */
html.cotc-entrance-dismissing .cotc-main-nav,
html.cotc-entrance-dismissing .cotc-header-wrapper,
html.cotc-entrance-dismissing .cotc-top-header,
html.cotc-entrance-dismissing #block-pirate-chickens-page-title {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}