/* 青森県興行生活衛生同業組合 テキスト切替 v6 (4K対応)
   - 背景画像の縦横中央にテキストパネルを配置
   - 左上ロゴは絶対配置（テキストの中央位置を押し下げない）
   - 長い文章の折り返し分の高さを確保
   - 1800px超の大画面でも画像比率 1800:800 を保ち、座席を切らない
   保存先: /css/text-rotation.css
   画像: /images/cinema_blank_1800x800.png /images/logo-m.svg
*/
.aomori-text-hero {
  --ae-text-color: #fff;
  --ae-panel-color: rgb(0, 0, 0/78%);
  --ae-fade-time: 1200ms;
  --ae-slide: 6px;
  --ae-pad-x: clamp(20px, 4vw, 72px);
  --ae-pad-y: clamp(22px, 3.2vw, 50px);

  box-sizing: border-box;
  isolation: isolate;
  position: relative;
  display: grid;
  /* ロゴ用の行を作らず、背景画像「全体」の中央に配置 */
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  width: 100%;
  /* 1800x800の元画像と同じ9:4比率。800pxの上限は設けない */
  min-height: max(580px, 44.444444vw);
  height: auto !important;
  max-height: none !important;
  margin: 0;
  padding: var(--ae-pad-y) var(--ae-pad-x);
  overflow: visible !important;
  color: var(--ae-text-color);
  background-color: #101b29;
  background-image:
    linear-gradient(180deg, rgb(4 11 20 / 32%), rgb(4 11 20 / 18%) 40%, rgb(4 11 20 / 36%)),
    url("../images/cinema_blank_1800x800.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.aomori-text-hero,
.aomori-text-hero * { box-sizing: border-box; }

/* ロゴはヒーロー左上に独立させる。中央の文章には高さを加算しない */
.aomori-text-hero__brand {
  position: absolute;
  z-index: 2;
  top: var(--ae-pad-y);
  left: var(--ae-pad-x);
  display: block;
  width: clamp(175px, 17vw, 250px);
  max-width: calc(100% - 2 * var(--ae-pad-x));
  height: auto;
  margin: 0;
  padding: 0;
}
.aomori-text-hero .logo-size {
  position: static !important;
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 118px !important;
  margin: 0 !important;
  object-fit: contain;
  object-position: left top;
  transform: none !important;
}

/* テキストは背景画像の真ん中。上部のロゴの高さは計算に入れない */
.aomori-text-hero__body {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}
.aomori-text-hero__panel {
  width: min(100%, 1100px);
  min-width: 0;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto;
  padding: 30px clamp(22px, 3.2vw, 52px);
  border-radius: 12px;
  background: var(--ae-panel-color);
  text-align: center;
  overflow: visible !important;
  box-shadow: 0 10px 34px rgb(0 0 0 / 14%);
}

/* 最長テキストで必要な高さを確保し、全文切替でもボックス高を固定 */
.aomori-text-hero .ae-rotator {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  justify-items: stretch;
  width: 100%;
  min-width: 0;
  height: auto !important;
  max-height: none !important;
  margin: 0;
  padding: 0 !important;
  overflow: visible !important;
}
.aomori-text-hero .ae-rotator__item {
  position: relative !important;
  inset: auto !important;
  grid-area: 1 / 1;
  display: block !important;
  width: 100%;
  min-width: 0;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  text-overflow: clip;
  font-family: inherit;
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .015em;
  color: var(--ae-text-color);
  text-align: center;
  text-wrap: balance;
  animation: none !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--ae-slide));
  transition:
    opacity var(--ae-fade-time) ease-in-out,
    transform var(--ae-fade-time) cubic-bezier(.22, 1, .36, 1),
    visibility 0s linear var(--ae-fade-time);
  pointer-events: none;
   font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO";
}
.aomori-text-hero .ae-rotator__item.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    opacity var(--ae-fade-time) ease-in-out,
    transform var(--ae-fade-time) cubic-bezier(.22, 1, .36, 1),
    visibility 0s;
}

/* ===== 大型モニター：劇場の座席を画面から切り落とさない =====
   元画像 1800×800px（縦横比 9:4）。
   横幅に対し高さを 4/9 確保し、contain で画像全体を表示。
   例: 2560px→約1138px / 3840px→約1707px。
   背景の1枚目は暗めのグラデーション、2枚目が劇場画像。
*/
@media (min-width: 1800px) {
  .aomori-text-hero {
    min-height: 44.444444vw;
    max-height: none !important;
    background-size: cover, contain;
    background-position: center center, center center;
    background-repeat: no-repeat, no-repeat;
  }
}

/* 4Kでロゴや文字だけ極端に小さく見えないよう控えめに拡大 */
@media (min-width: 2560px) {
  .aomori-text-hero {
    --ae-pad-x: clamp(72px, 4vw, 160px);
    --ae-pad-y: clamp(50px, 3vw, 110px);
  }
  .aomori-text-hero__brand {
    width: clamp(250px, 10vw, 380px);
  }
  .aomori-text-hero .logo-size {
    max-height: 170px !important;
  }
  .aomori-text-hero__panel {
    width: min(100%, 1450px);
    padding: clamp(30px, 2.3vw, 78px) clamp(52px, 3.2vw, 120px);
  }
  .aomori-text-hero .ae-rotator__item {
    font-size: clamp(38px, 1.4vw, 54px);
  }
}

@media (max-width: 1023px) {
  .aomori-text-hero {
    min-height: 580px;
    --ae-pad-x: 22px;
    --ae-pad-y: 24px;
  }
  .aomori-text-hero__brand { width: clamp(165px, 22vw, 210px); }
  .aomori-text-hero .logo-size { max-height: 104px !important; }
  .aomori-text-hero__panel { padding: 28px 30px; }
  .aomori-text-hero .ae-rotator__item {
    font-size: clamp(22px, 3vw, 30px);
    line-height: 1.65;
  }
}

@media (max-width: 767px) {
  .aomori-text-hero {
    --ae-slide: 4px;
    --ae-pad-x: 14px;
    --ae-pad-y: 18px;
    /* 背景とテキストの中心位置を維持しつつ、十分な縦幅を確保 */
    min-height: clamp(540px, 78vw, 600px);
    background-position: 50% center;
  }
  .aomori-text-hero__brand {
    width: clamp(118px, 37vw, 150px);
  }
  .aomori-text-hero .logo-size { max-height: 88px !important; }
  .aomori-text-hero__panel {
    width: 100%;
    padding: 22px 16px;
    border-radius: 10px;
    background: rgb(0, 0, 0 / 84%);
  }
  .aomori-text-hero .ae-rotator__item {
    font-size: clamp(18px, 4.65vw, 22px);
    font-weight: 600;
    line-height: 1.75;
    letter-spacing: .005em;
    text-wrap: pretty;
  }
}
@media (max-width: 359px) {
  .aomori-text-hero {
    --ae-pad-x: 10px;
    --ae-pad-y: 16px;
    min-height: 540px;
  }
  .aomori-text-hero__brand { width: 118px; }
  .aomori-text-hero__panel { padding: 20px 12px; }
  .aomori-text-hero .ae-rotator__item {
    font-size: 17px;
    line-height: 1.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aomori-text-hero .ae-rotator__item,
  .aomori-text-hero .ae-rotator__item.is-active {
    transition: none;
    transform: none;
  }
}