/*
 * Theme Name: Soraoto Theme
 * Template: twentytwentyfive
 * Description: This is the theme for soraoto. This is a child theme of Twenty Twenty-Five theme.
 * Author: Shunta
 * Version: 1.0
 */

* { box-sizing: border-box; }
body { -webkit-font-smoothing: antialiased; }

/* 二つの子を持つ親コンテナとその子らに以下のクラスを適切に付与することで、背景とコンテンツを別のレイヤーで作って重ねることが出来る */
.soraoto-has-bg-container { display: grid !important; }
.soraoto-bg-container { grid-area: 1 / 1; width: 100%; height: 100%; overflow-x: clip; }
.soraoto-content-container { grid-area: 1 / 1; z-index: 1; padding: 0 clamp(1rem, calc(1vw/1px * 1.5vw - 40px), 30rem) clamp(5rem, calc(1vw/1px * 1vw), 15rem); }

/* 見出しなど、クラスを付与して下線アニメーションを追加できる。 */
.soraoto-has-underline::after { content: ""; display: block; width: 100%; height: .1em; background-color: var(--wp--preset--color--accent); }
@supports (animation-timeline: view()) {
  @keyframes soraoto-underline {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  .soraoto-has-underline::after { transform-origin: left; transform: scaleX(0); animation: soraoto-underline 1ms linear forwards; animation-timeline: view(); animation-range: contain 10% contain 50%; }
}