/* animations.css — アニメーション定義 */
/* ── ANIMATIONS ── */
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes curtainReveal {
  0%   { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
  100% { clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes kenBurns {
  0%   { transform: scale(1.15) translate(2%, -1%); }
  50%  { transform: scale(1.08) translate(-1%, 1%); }
  100% { transform: scale(1.15) translate(2%, -1%); }
}
@keyframes kenBurns2 {
  0%   { transform: scale(1.12) translate(-2%, 1%); }
  50%  { transform: scale(1.06) translate(1%, -1%); }
  100% { transform: scale(1.12) translate(-2%, 1%); }
}
@keyframes kenBurns3 {
  0%   { transform: scale(1.1) translate(0%, -2%); }
  50%  { transform: scale(1.16) translate(-1%, 1%); }
  100% { transform: scale(1.1) translate(0%, -2%); }
}
@keyframes lineReveal {
  0%   { opacity: 0; transform: translateY(40px) skewY(2deg); }
  60%  { opacity: 1; transform: translateY(-4px) skewY(0); }
  100% { opacity: 1; transform: translateY(0) skewY(0); }
}
@keyframes geoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-20px) rotate(8deg); }
}
@keyframes geoFloat2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(15px) rotate(-6deg); }
}
@keyframes geoSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes geoPulse {
  0%, 100% { opacity: .3; transform: scale(1); }
  50%      { opacity: .7; transform: scale(1.6); }
}
@keyframes borderGlow {
  0%, 100% { opacity: .4; }
  50%      { opacity: 1; }
}

/* ── HERO GEOMETRIC DECORATION ── */
.ly_hero_geo { position: absolute; inset: 0; pointer-events: none; z-index: var(--z-base); overflow: hidden; }
.bl_hero_geoCircle--1 { position: absolute; right: 48%; top: -100px; width: 400px; height: 400px; border-radius: 50%; border: 2px solid rgba(240,120,40,.15); animation: geoSpin 40s linear infinite; }
.bl_hero_geoCircle--2 { position: absolute; left: 8%; bottom: -60px; width: 200px; height: 200px; border-radius: 50%; border: 2px dashed rgba(90,154,48,.12); animation: geoSpin 30s linear infinite reverse; }
.bl_hero_geoLine--1 { position: absolute; top: 22%; left: 38%; width: 120px; height: 2px; background: linear-gradient(90deg, transparent, rgba(240,120,40,.2), transparent); transform: rotate(-25deg); animation: geoFloat 6s ease-in-out infinite; }
.bl_hero_geoLine--2 { position: absolute; bottom: 28%; left: 30%; width: 80px; height: 2px; background: linear-gradient(90deg, transparent, rgba(90,154,48,.15), transparent); transform: rotate(15deg); animation: geoFloat2 8s ease-in-out infinite; }
.bl_hero_geoDot { position: absolute; border-radius: 50%; }
.bl_hero_geoDot--1 { width: 8px; height: 8px; top: 25%; left: 44%; background: var(--orange); animation: geoPulse 3s ease-in-out infinite; }
.bl_hero_geoDot--2 { width: 5px; height: 5px; top: 60%; left: 36%; background: var(--leaf); opacity: .4; animation: geoPulse 4s ease-in-out 1s infinite; }
.bl_hero_geoDot--3 { width: 6px; height: 6px; top: 15%; left: 28%; background: var(--brown-m); opacity: .3; animation: geoPulse 3.5s ease-in-out .5s infinite; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .ly_hero_visual, .ly_hero_visual.is-revealed { animation: none; clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%); }
  .bl_hero_photo { animation: none !important; transform: scale(1); }
  .bl_hero_catchLine { animation: none; opacity: 1; transform: none; }
  .ly_hero_geo { display: none; }
}
.bl_reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.bl_reveal.is-visible { opacity: 1; transform: translateY(0); }
.bl_reveal--delay1 { transition-delay: .1s; }
.bl_reveal--delay2 { transition-delay: .2s; }
.bl_reveal--delay3 { transition-delay: .3s; }