/**
 * Seance for the World Wide Web
 * The Void - CSS Styling
 */

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

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

/* The Void - main container */
#void {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ============================================================
 * Candle Animation
 * 
 * Copyright (c) 2026 by Mamun Khandaker
 * https://codepen.io/kh-mamun/pen/YLGjvx
 * 
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:
 * 
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 * ============================================================ */

.holder {
  width: 75px;   /* 50% of original 150px */
  height: 200px; /* 50% of original 400px */
  position: relative;
}

.holder *, .holder *:before, .holder *:after {
  position: absolute;
  content: "";
}

.candle {
  bottom: 0;
  width: 75px;   /* 50% of 150px */
  height: 150px; /* 50% of 300px */
  border-radius: 75px / 20px; /* 50% of 150px / 40px */
  box-shadow: inset 10px -15px 25px 0 rgba(0, 0, 0, 0.4), inset -10px 0 25px 0 rgba(0, 0, 0, 0.4);
  background: #190f02;
  background: linear-gradient(#e48825, #e78e0e, #833c03, #4c1a03 50%, #1c0900);
}

.candle:before {
  width: 100%;
  height: 20px; /* 50% of 40px */
  border-radius: 50%;
  border: 1px solid #d47401;
  background: #b86409;
  background: radial-gradient(#eaa121, #8e4901 45%, #b86409 80%);
}

.candle:after {
  width: 17px;  /* 50% of 34px */
  height: 5px;  /* 50% of 10px */
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  top: 7px; /* 50% of 14px */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  background: radial-gradient(rgba(0, 0, 0, 0.6), transparent 45%);
}

.thread {  
  width: 3px;   /* 50% of 6px */
  height: 18px; /* 50% of 36px */
  top: -8px;    /* 50% of -17px, rounded */
  left: 50%;
  z-index: 1;
  border-radius: 40% 40% 0 0;
  transform: translateX(-50%);
  background: #121212;
  background: linear-gradient(#d6994a, #4b232c, #121212, black, #e8bb31 90%);
}

.flame {
  width: 12px;  /* 50% of 24px */
  height: 60px; /* 50% of 120px */
  left: 50%;
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  bottom: 100%;
  border-radius: 50% 50% 20% 20%;
  background: rgba(255, 255, 255, 1);
  background: linear-gradient(white 80%, transparent);
  animation: moveFlame 6s linear infinite, enlargeFlame 5s linear infinite;
}

.flame:before {
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 20% 20%;
  box-shadow: 0 0 8px 0 rgba(247, 93, 0, .4), 0 -3px 2px 0 rgba(247, 128, 0, .7);
}

@keyframes moveFlame {
  0%, 100% {
    transform: translateX(-50%) rotate(-2deg);
  }
  50% {
    transform: translateX(-50%) rotate(2deg);
  }
}

@keyframes enlargeFlame {
  0%, 100% {
    height: 60px; /* 50% of 120px */
  }
  50% {
    height: 70px; /* 50% of 140px */
  }
}

.glow {
  width: 13px;  /* 50% of 26px */
  height: 30px; /* 50% of 60px */
  border-radius: 50% 50% 35% 35%;
  left: 50%;
  top: -24px; /* 50% of -48px */
  transform: translateX(-50%);
  background: rgba(0, 133, 255, .7);
  box-shadow: 0 -20px 15px 0 #dc8a0c, 0 20px 25px 0 #dc8a0c, inset 1px 0 1px 0 rgba(0, 133, 255, .6), inset -1px 0 1px 0 rgba(0, 133, 255, .6);
}

.glow:before {
  width: 70%;
  height: 60%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
}

.blinking-glow {
  width: 50px;  /* 50% of 100px */
  height: 90px; /* 50% of 180px */
  left: 50%;
  top: -55%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #ff6000;
  filter: blur(30px); /* 50% of 60px */
  animation: blinkIt 3s ease-in-out infinite;
}

@keyframes blinkIt {
  0%, 100% { opacity: 1; }
  50% { opacity: .85; }
}

/* ============================================================
 * Candle Gutter - Spirit Disturbance
 * 
 * When an AI agent invokes a WebMCP tool, the candle reacts.
 * The spirits stir. Something invisible moves past the flame.
 * ============================================================ */

/* --- Lead-in: ease from idle into the gutter --- */

@keyframes leadinFlame {
  from { transform: translateX(-50%) rotate(-2deg); height: 60px; }
  to   { transform: translateX(-50%) rotate(0deg);  height: 55px; }
}

@keyframes leadinGlow {
  from { opacity: 1; }
  to   { opacity: 0.8; }
}

.candle--leadin .flame {
  animation: leadinFlame 0.8s ease-in forwards; /* match LEADIN_DURATION in seance.js */
}

.candle--leadin .blinking-glow {
  animation: leadinGlow 0.8s ease-in forwards; /* match LEADIN_DURATION in seance.js */
}

/* --- Light gutter: a breeze, first contact --- */

@keyframes gutterFlameLight {
  0%, 100% { transform: translateX(-50%) rotate(-1deg); height: 58px; }
  50%      { transform: translateX(-50%) rotate(3deg);  height: 54px; }
}

@keyframes gutterGlowLight {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.75; }
}

.candle--guttering-light .flame {
  animation: gutterFlameLight 1.2s ease-in-out infinite;
}

.candle--guttering-light .blinking-glow {
  animation: gutterGlowLight 1.2s ease-in-out infinite;
}

/* --- Medium gutter: something stirs --- */

@keyframes gutterFlameMedium {
  0%, 100% { transform: translateX(-50%) rotate(-2deg); height: 55px; }
  35%      { transform: translateX(-50%) rotate(6deg);  height: 44px; }
  70%      { transform: translateX(-50%) rotate(-5deg); height: 48px; }
}

@keyframes gutterGlowMedium {
  0%, 100% { opacity: 1; }
  40%      { opacity: 0.45; }
  75%      { opacity: 0.65; }
}

.candle--guttering .flame {
  animation: gutterFlameMedium 0.8s ease-in-out infinite;
}

.candle--guttering .blinking-glow {
  animation: gutterGlowMedium 0.8s ease-in-out infinite;
}

.candle--guttering .glow {
  opacity: 0.5;
  transition: opacity 0.3s;
}

/* --- Heavy gutter: a spirit passes through --- */

@keyframes gutterFlameHeavy {
  0%   { transform: translateX(-50%) rotate(-2deg);  height: 50px; }
  20%  { transform: translateX(-50%) rotate(10deg);  height: 22px; }
  45%  { transform: translateX(-50%) rotate(-8deg);  height: 15px; }
  70%  { transform: translateX(-50%) rotate(5deg);   height: 30px; }
  100% { transform: translateX(-50%) rotate(-1deg);  height: 60px; }
}

@keyframes gutterGlowHeavy {
  0%, 100% { opacity: 1; }
  25%  { opacity: 0.15; }
  50%  { opacity: 0.05; }
  75%  { opacity: 0.3; }
}

.candle--guttering-heavy .flame {
  animation: gutterFlameHeavy 0.5s ease-in-out infinite;
}

.candle--guttering-heavy .blinking-glow {
  animation: gutterGlowHeavy 0.5s ease-in-out infinite;
}

.candle--guttering-heavy .glow {
  opacity: 0.1;
  transition: opacity 0.3s;
}

/* --- Recovery: ease back to the normal idle state --- */

@keyframes recoverFlame {
  from { transform: translateX(-50%) rotate(0deg); height: 55px; }
  to   { transform: translateX(-50%) rotate(-2deg); height: 60px; }
}

@keyframes recoverGlow {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

.candle--recovering .flame {
  animation: recoverFlame 0.8s ease-out forwards; /* match RECOVER_DURATION in seance.js */
}

.candle--recovering .blinking-glow {
  animation: recoverGlow 0.8s ease-out forwards; /* match RECOVER_DURATION in seance.js */
}

.candle--recovering .glow {
  opacity: 1;
  transition: opacity 0.8s ease-out; /* match RECOVER_DURATION in seance.js */
}

/* ============================================================
 * End Candle Gutter
 * ============================================================ */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .flame {
    animation: none;
    height: 60px;
  }
  .blinking-glow {
    animation: none;
    opacity: 0.9;
  }
  /* Disable gutter animations too */
  .candle--guttering-light .flame,
  .candle--guttering .flame,
  .candle--guttering-heavy .flame {
    animation: none;
    height: 60px;
  }
  .candle--guttering-light .blinking-glow,
  .candle--guttering .blinking-glow,
  .candle--guttering-heavy .blinking-glow {
    animation: none;
    opacity: 0.9;
  }
  .candle--guttering .glow,
  .candle--guttering-heavy .glow {
    opacity: 1;
  }
  .candle--leadin .flame,
  .candle--recovering .flame {
    animation: none;
    height: 60px;
  }
  .candle--leadin .blinking-glow,
  .candle--recovering .blinking-glow {
    animation: none;
    opacity: 0.9;
  }
}

/* ============================================================
 * End Candle Animation
 * ============================================================ */

/* Explanation text (shown after timeout) */
.hidden {
  display: none !important;
}

#explanation {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #555;
  font-family: monospace;
  font-size: 14px;
  text-align: center;
  line-height: 1.8;
  max-width: 500px;
  padding: 20px;
  z-index: 100;
  margin-top: 180px;
}

#explanation p {
  margin: 10px 0;
}

/* Attribution link */
.attribution {
  position: fixed;
  bottom: 10px;
  left: 10px;
  font-family: monospace;
  font-size: 10px;
  color: #333;
  text-decoration: none;
}

.attribution:hover {
  color: #555;
}