/* Site-wide motion layer: water, time and gold. Loaded on the public pages (not admin).
   Only transform/opacity/scale/translate/rotate are animated; layout never moves (no CLS).
   [data-motion=off] (also set for prefers-reduced-motion) disables everything.
   Forms, inputs and form buttons get no effect: inquiry, purchase and login stay calm. */

/* 1. Top page opening (once per tab session) */
.rich-intro .hero > .hero-clock { animation:rich-clock-in 1.5s cubic-bezier(.2,.7,.2,1) both; }
.rich-intro .hero > .hero-clock .hc-hands { animation:rich-rewind 2s cubic-bezier(.25,.8,.15,1) both; }
.rich-intro .hero h1 img { animation:rich-logo-drop 1.1s cubic-bezier(.3,1.35,.45,1) .1s both; }
.rich-splash { position:absolute; left:50%; top:88%; width:0; height:0; pointer-events:none; z-index:1; }
.rich-splash > i { --ring:min(520px,92vw); position:absolute; left:calc(var(--ring) / -2); top:calc(var(--ring) / -10); width:var(--ring); height:calc(var(--ring) / 5); border:2px solid #3fb4e6cc; border-radius:50%; box-shadow:0 0 0 1px #ffffffd9,0 0 24px #7fd6ffaa,inset 0 0 14px #ffffffb0; opacity:0; }
.rich-intro .rich-splash > i { animation:rich-ring 1.8s cubic-bezier(.15,.7,.3,1) both; }
.rich-intro .rich-splash > i:nth-child(1) { animation-delay:.7s; }
.rich-intro .rich-splash > i:nth-child(2) { animation-delay:.9s; border-color:#d9b26ad9; }
.rich-intro .rich-splash > i:nth-child(3) { animation-delay:1.15s; }

/* 2. Glint over the top-page logo (masked to the logo shape, every 9 s) */
.hero h1 { position:relative; }
.rich-glint {
  position:absolute;
  pointer-events:none;
  overflow:hidden;
  -webkit-mask:var(--logo) center/contain no-repeat;
  mask:var(--logo) center/contain no-repeat;
}
.rich-glint::before {
  content:"";
  position:absolute;
  inset:-10% -60%;
  background:linear-gradient(105deg,transparent 40%,#ffffff00 42%,#fffef2d9 48%,#ffe6a8a6 51%,#ffffff00 56%,transparent 60%);
  translate:-70% 0;
  animation:rich-glint 9s ease-in-out 2.4s infinite;
}

/* 3. Slow breathing on the top page characters (no pointer parallax: see motion-rich.js §3).
   No extra will-change: promoting the large logo/clock layers measured slower on a slow CPU. */
.hero-person.illustration-drift {
  transform-origin:50% 92%;
  animation:hero-art-appear .65s ease-out both,artwork-drift 8s ease-in-out infinite,rich-breathe 7s ease-in-out infinite;
}
.right-person.illustration-drift { animation-duration:.65s,9.2s,7.8s; animation-delay:0s,-3.5s,-2.5s; }

/* 4. Minute ripple on the gold clocks and rising countdown digits */
.hc-feature .rich-ripple { inset:7.2%; overflow:hidden; z-index:1; }
.rich-ripple > i { position:absolute; left:20%; top:51%; width:60%; height:9%; border:1.5px solid #ffffffe0; border-radius:50%; opacity:0; }
.hc-feature.rich-tick .rich-ripple > i { animation:rich-water-ring 1.6s cubic-bezier(.15,.7,.3,1) both; }
.hc-feature.rich-tick .rich-ripple > i + i { animation-delay:.25s; }
.hc-feature.rich-tick .hc-numeral:first-child > b { animation:rich-gold-flash 1.6s ease-out both; }
.countdown strong.rich-changed { animation:rich-surface .8s cubic-bezier(.2,.8,.2,1) both; }

/* 5. Cards arrive in sequence (all pages) */
.rich-cards-in > .motion-card { animation:rich-card-in .75s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--rich-i,0) * 90ms); }

/* 6. Gold shimmer on link buttons only (never on form submit buttons) */
a.button { position:relative; overflow:hidden; isolation:isolate; }
a.button::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(110deg,transparent 30%,#fff3cf55 45%,#ffe2a066 50%,transparent 65%);
  translate:-110% 0;
  transition:translate .8s cubic-bezier(.2,.7,.2,1);
  pointer-events:none;
}
a.button:hover::after, a.button:focus-visible::after { translate:110% 0; }

/* 7. Other pages: the page-mast clock rewinds once on arrival and the title gets a gold line */
.rich-mast-in .mast-clock .hc-hands { animation:rich-rewind 1.6s cubic-bezier(.25,.8,.15,1) both; }
.rich-mast-in .mast-clock > .hero-clock { animation:rich-clock-in 1.2s cubic-bezier(.2,.7,.2,1) both; }
.page-mast h1 { position:relative; }
.page-mast h1::after {
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:min(160px,45%);
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg,#c6a36b,#fff0c8 55%,#c6a36b00);
  transform-origin:left center;
  pointer-events:none;
}
.rich-mast-in .page-mast h1::after { animation:rich-underline 1.1s cubic-bezier(.2,.8,.2,1) .25s both; }

/* 8. Below the top area: decorative art and the gold clock appear with the scroll
   position (scroll-driven; browsers without it keep the regular reveal). Text is not scrubbed. */
@supports (animation-timeline:view()) {
  .illustration-note > img.illustration-drift, .mini-art > img.illustration-drift, .bottom-guide > img.illustration-drift, .packing-art.illustration-drift, .contact-art.illustration-drift {
    animation:artwork-drift 9s ease-in-out -2s infinite,rich-art-rise linear both;
    animation-timeline:auto,view();
    animation-range:normal,entry 0% cover 35%;
  }
  .duel-cards > img { animation:rich-card-fan linear both; animation-timeline:view(); animation-range:entry 0% cover 40%; }
  .duel-cards > img + img { animation-name:rich-card-fan-back; }
  .clock-assembly > .hero-clock.hc-feature { animation:rich-clock-rise linear both; animation-timeline:view(); animation-range:entry 0% cover 40%; }
}

@keyframes rich-clock-in { from { opacity:0; scale:.88; } to { opacity:1; scale:1; } }
@keyframes rich-rewind { from { rotate:-360deg; } to { rotate:0deg; } }
@keyframes rich-logo-drop { from { translate:0 -26px; } 60% { translate:0 4px; } to { translate:0 0; } }
@keyframes rich-ring { 0% { opacity:0; scale:.25; } 20% { opacity:.9; } 100% { opacity:0; scale:1.7; } }
@keyframes rich-glint { 0% { translate:-70% 0; } 16%, 100% { translate:70% 0; } }
@keyframes rich-breathe { 0%, 100% { scale:1 1; } 50% { scale:1.004 1.012; } }
@keyframes rich-water-ring { 0% { opacity:0; scale:.2 .4; } 25% { opacity:.95; } 100% { opacity:0; scale:1.25 1.6; } }
@keyframes rich-gold-flash { 0% { color:inherit; text-shadow:none; } 30% { color:#c99a3c; text-shadow:0 0 10px #ffd98acc,0 0 2px #fff; } 100% { color:inherit; text-shadow:none; } }
@keyframes rich-surface { from { opacity:.15; translate:0 .35em; filter:blur(3px); } to { opacity:1; translate:0 0; filter:none; } }
@keyframes rich-card-in { from { opacity:0; translate:0 26px; scale:.97; } to { opacity:1; translate:0 0; scale:1; } }
@keyframes rich-underline { from { scale:0 1; opacity:0; } to { scale:1 1; opacity:1; } }
@keyframes rich-art-rise { from { opacity:.25; scale:.9; rotate:-3deg; } to { opacity:1; scale:1; rotate:0deg; } }
@keyframes rich-card-fan { from { rotate:-14deg; opacity:.3; } to { rotate:0deg; opacity:1; } }
@keyframes rich-card-fan-back { from { rotate:14deg; opacity:.3; } to { rotate:0deg; opacity:1; } }
@keyframes rich-clock-rise { from { opacity:.3; scale:.86; rotate:-20deg; } to { opacity:1; scale:1; rotate:0deg; } }

[data-motion=off] .rich-splash, [data-motion=off] .rich-glint, [data-motion=off] .rich-ripple { display:none; }
[data-motion=off] .hero-title { transform:none!important; }
[data-motion=off] a.button::after { display:none; }
@media(prefers-reduced-motion:reduce) {
  html:not([data-motion=on]) .rich-splash, html:not([data-motion=on]) .rich-glint, html:not([data-motion=on]) .rich-ripple { display:none; }
  html:not([data-motion=on]) .hero-title { transform:none!important; }
  html:not([data-motion=on]) *, html:not([data-motion=on]) *::before, html:not([data-motion=on]) *::after { animation-timeline:auto!important; }
}
@media(forced-colors:active) { .rich-splash, .rich-glint, .rich-ripple, a.button::after, .page-mast h1::after { display:none; } }
@media print { .rich-splash, .rich-glint, .rich-ripple, .page-mast h1::after { display:none; } }

/* 2026-10-18 (reports\54): the OCG logo and the card backs on the top page float like the other illustrations.
   Reduced motion / the "アニメーション: オフ" setting (html[data-motion=off], also set from prefers-reduced-motion) stops all of it. */
.duel-identity .ygo-logo { animation:artwork-drift 9s ease-in-out -2s infinite; }
.duel-cards > img { animation:card-drift 7s ease-in-out infinite; }
.duel-cards > img + img { animation-delay:-3s; }
@supports (animation-timeline:view()) {
  .duel-identity .ygo-logo { animation:artwork-drift 9s ease-in-out -2s infinite,rich-art-rise linear both; animation-timeline:auto,view(); animation-range:normal,entry 0% cover 35%; }
  .duel-cards > img { animation:rich-card-fan linear both,card-drift 7s ease-in-out infinite; animation-timeline:view(),auto; animation-range:entry 0% cover 40%,normal; }
  .duel-cards > img + img { animation-name:rich-card-fan-back,card-drift; animation-delay:0s,-3s; }
}
[data-motion=off] .duel-identity .ygo-logo, [data-motion=off] .duel-cards > img { animation:none!important; }
@media(prefers-reduced-motion:reduce) {
  html:not([data-motion=on]) .duel-identity .ygo-logo, html:not([data-motion=on]) .duel-cards > img { animation:none!important; }
}