/* =========================================================
   Unified seasonal index styles
   - Common images live in: images/
   - Seasonal images live in: images/winter | spring | summer | autumn
   - JS sets: body[data-season="plain|winter|spring|summer|autumn"]
   ========================================================= */

/* ===== base ===== */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Zen Old Mincho', serif;
  background-color: #f4f1e8;
  overflow: hidden;
}

.main-link-container{
  display:block;
  position:relative;
  width:100%;
  height:100%;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  z-index: 5; /* always above seasonal layers */
}

.content-wrapper{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  justify-content:center;
  width:80%;
  max-width:1000px;
}

.phoenix-wrapper{
  position:relative;
  width:50%;
  max-width:500px;
  aspect-ratio:4/3;
  margin-left:-50px;
  transform-origin:center center;
}

.phoenix-image{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto;
  backface-visibility:hidden;
}

.img-1{ opacity:1; z-index:2; }
.img-2{ opacity:0; z-index:1; }

.title-area{ writing-mode:vertical-rl; z-index:1; }

h1{
  font-size:clamp(2.5rem,6vw,5rem);
  letter-spacing:0.5em;
  margin:0;
  font-weight:500;
  line-height:1.5;
  color:#1a2a40;
  text-shadow:
    1px 1px 2px rgba(255,255,255,0.6),
    -1px 1px 2px rgba(255,255,255,0.6),
    1px -1px 2px rgba(255,255,255,0.6),
    -1px -1px 2px rgba(255,255,255,0.6);
}

/* fade in */
@keyframes fadeIn{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
.fade-in{ opacity:0; animation:fadeIn 2.1s ease-out forwards; }
.fade-in-title{ opacity:0; animation:fadeIn 2.1s ease-out .5s forwards; }

/* fly away */
@keyframes flyMove{
  0%{ transform:translateY(0) scale(1); opacity:1; }
  100%{ transform:translate(-250px,-300px) scale(.6); opacity:0; }
}
@keyframes flap-img1{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@keyframes flap-img2{ 0%,49%{opacity:0;} 50%,100%{opacity:1;} }

.is-flying{ animation:flyMove 1.2s ease-in forwards !important; }
.is-flying .img-1{ animation:flap-img1 .2s steps(1) infinite; }
.is-flying .img-2{ animation:flap-img2 .2s steps(1) infinite; }
.is-fading-out{ transition:opacity .5s ease; opacity:0 !important; }

@media (max-width:768px){
  .content-wrapper{ flex-direction:column; width:90%; }
  .title-area{ writing-mode:horizontal-tb; margin-top:20px; }
  .phoenix-wrapper{ width:70%; margin-left:0; }
  h1{ font-size:2rem; letter-spacing:.2em; }
}

/* =========================================================
   Seasonal layers: default OFF
   ========================================================= */
#winterOverlay, #snowFallLayer, #snowFlicker,
#springOverlay, #petalBlizzard,
#summerOverlay, #firework-layer,
#autumnBg, #mapleLayer{
  display:none;
}

/* =========================================================
   Winter
   ========================================================= */
body[data-season="winter"] #winterOverlay,
body[data-season="winter"] #snowFallLayer,
body[data-season="winter"] #snowFlicker{
  display:block;
}

#winterOverlay{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url("../images/winter/keikoba_winter_bk.jpg") center bottom / cover no-repeat;
  opacity:0.7;
  filter:brightness(0.78) contrast(1.15);
}

/* snow flicker */
#snowFlicker{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  filter:contrast(1.12);
}
#snowFlicker .snow{
  position:absolute;
  inset:0;
  background-repeat:repeat;
  background-size:900px 900px;
  opacity:0;
  mix-blend-mode:normal;
  animation-timing-function:steps(1);
  transform:translateZ(0);
  will-change:opacity;
  background-position:0 -300px;
}
.snow-t1{ background-image:url("../images/winter/white_dots_transparent_1.png"); animation:f1 2.8s infinite; }
.snow-t2{ background-image:url("../images/winter/white_dots_transparent_2.png"); animation:f2 3.2s infinite; }
.snow-w { background-image:url("../images/winter/white_dots_density_weak.png");  animation:f3 4.2s infinite; }
.snow-m { background-image:url("../images/winter/white_dots_density_medium.png");animation:f4 3.6s infinite; }
.snow-s { background-image:url("../images/winter/white_dots_density_strong.png");animation:f5 8.0s infinite; }
@keyframes f1{0%{opacity:.04}30%{opacity:.16}55%{opacity:.05}75%{opacity:.18}100%{opacity:.07}}
@keyframes f2{0%{opacity:.10}18%{opacity:.03}48%{opacity:.14}72%{opacity:.04}100%{opacity:.09}}
@keyframes f3{0%{opacity:.05}35%{opacity:.11}65%{opacity:.04}100%{opacity:.06}}
@keyframes f4{0%{opacity:0}40%{opacity:.10}70%{opacity:.03}100%{opacity:.05}}
@keyframes f5{0%{opacity:0}74%{opacity:0}78%{opacity:.08}82%{opacity:0}92%{opacity:.06}100%{opacity:0}}

/* snow fall */
#snowFallLayer{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
#snowFallLayer .fall{
  position:absolute;
  inset:0;
  background-image:url("../images/winter/white_dots_density_medium.png");
  background-repeat:repeat;
  background-size:900px 900px;
  opacity:0.0;
  filter:brightness(1.25) contrast(1.15);
  animation:snowFallMove 22s linear infinite;
}
#snowFallLayer .l1{ transform:translateY(0px);   animation-delay:0s; }
#snowFallLayer .l2{ transform:translateY(100px); animation-delay:5.5s; }
#snowFallLayer .l3{ transform:translateY(200px); animation-delay:11s; }
#snowFallLayer .l4{ transform:translateY(300px); animation-delay:16.5s; }
@keyframes snowFallMove{
  0%{ background-position:0 -300px; opacity:0.04; }
  30%{ opacity:0.10; }
  60%{ opacity:0.18; }
  100%{ background-position:0 700px; opacity:0.26; }
}

/* =========================================================
   Spring
   ========================================================= */
body[data-season="spring"] #springOverlay,
body[data-season="spring"] #petalBlizzard{
  display:block;
}
#springOverlay{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url("../images/spring/keikoba_spring_bk.jpg") center bottom / cover no-repeat;
  opacity:0.7;
  filter:brightness(0.90) contrast(1.05);
}
#petalBlizzard{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  overflow:hidden;
}
#petalBlizzard .petalItem{
  position:absolute;
  top:-15vh;
  left:0;
  width:var(--size,22px);
  height:auto;
  opacity:var(--op,0.75);
  transform:translate3d(0,-15vh,0) rotate(0deg);
  will-change:transform;
  filter:blur(var(--blur,0px));
  animation:petalFall var(--dur,16s) linear var(--delay,0s) 1;
}
@keyframes petalFall{
  0%{ transform:translate3d(0,-15vh,0) rotate(0deg); }
  100%{ transform:translate3d(var(--drift,120px),110vh,0) rotate(var(--rot,720deg)); }
}

/* =========================================================
   Summer
   ========================================================= */
body[data-season="summer"] #summerOverlay,
body[data-season="summer"] #firework-layer{
  display:block;
}
#summerOverlay{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url("../images/summer/keikoba_firework_bk.PNG") center bottom / cover no-repeat;
  opacity:0.7;
  filter:brightness(0.78) contrast(1.15);
}
#firework-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:3;
}
#firework-layer img{
  mix-blend-mode:screen;
  object-position:center bottom;
}
#trail-up, #trail-down, #firework-burst{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  opacity:0;
  mix-blend-mode:screen;
  will-change:clip-path, opacity, transform, filter;
}
#trail-up{ transform-origin:bottom center; }
#trail-down{ transform-origin:top center; }
#firework-burst{ transform-origin:70% 35%; }

/* =========================================================
   Autumn
   ========================================================= */
body[data-season="autumn"] #autumnBg,
body[data-season="autumn"] #mapleLayer{
  display:block;
}
#autumnBg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:url("../images/autumn/keikoba_autumn_bk.jpg") center / cover no-repeat;
  opacity:0.85;
  filter:brightness(0.92) contrast(1.06);
  transform:translateZ(0);
}
#mapleLayer{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}
.maple-leaf{
  position:absolute;
  top:-15vh;
  width:var(--size,60px);
  height:var(--size,60px);
  background-image:var(--img);
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:var(--op,0.8);
  transform:translate3d(0,0,0) rotate(var(--rot,0deg));
  will-change:transform;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.10));
  animation:
    maple-fall var(--dur,14s) linear var(--delay,0s) infinite,
    maple-sway var(--swayDur,3.2s) ease-in-out calc(var(--delay,0s) * 0.7) infinite;
}
@keyframes maple-fall{
  to{
    transform:translate3d(var(--dx,0px),115vh,0) rotate(calc(var(--rot,0deg) + var(--spin,720deg)));
  }
}
@keyframes maple-sway{
  0%{ margin-left:0; }
  50%{ margin-left:var(--sway,0px); }
  100%{ margin-left:0; }
}
@media (prefers-reduced-motion: reduce){
  #snowFallLayer, #snowFlicker, #petalBlizzard, #firework-layer, #mapleLayer{ display:none !important; }
}