/**
 * THETA — per-slit angled borders across the full viewport
 * Each band has its own angle + position (not pinned to screen center).
 */

/* Boot filter: solid until slits start moving, then drop instantly
   so black-on-black doesn't hide the slit animation. */
.tx_boot {
  background-color: var(--color-theta-surface, var(--color-dark-gray, #00317e));
  transition: none;
}

.tx_boot.tx_-theta-revealing {
  background-color: transparent;
}

.tx_boot_content {
  position: relative;
  z-index: 2;
}

.tx_boot_folds {
  z-index: 1;
}

/* Transition: no persistent filter during slit motion (would hide it).
   Optional flash cover only while idle between leave/enter if needed. */
.tx_pageWipe_folds::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-theta-surface, var(--color-dark-gray, #00317e));
  opacity: 0;
  transition: none;
  pointer-events: none;
}

.tx_pageWipe.tx_-theta-covering .tx_pageWipe_folds::before {
  opacity: 1;
}

.tx_pageWipe.tx_-theta-revealing .tx_pageWipe_folds::before {
  opacity: 0;
}

.tx_boot_folds,
.tx_pageWipe_folds {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.tx_pageFolds,
.tx_footFolds {
  position: fixed;
  inset: 0;
  overflow: hidden;
  /* スリットは装飾のみ。リンク（View About 等）のクリックを奪わない */
  pointer-events: none;
  z-index: -1;
}

.tx_pageFolds > .tx_folds,
.tx_footFolds > .tx_folds {
  pointer-events: none;
}

/*
  Gap fill inside .tx_pageFolds (same layer as slits).
  Fade in with header.tx_-on; fade out earlier than header color revert.
*/
.tx_pageFolds .tx_theta_foldFill {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--color-dark-gray, #00317e);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}

.tx_pageFolds.tx_-theta-fold-filled .tx_theta_foldFill {
  opacity: 1;
}

/* Slightly snappier when clearing (scroll-back) */
.tx_pageFolds.tx_-theta-fold-clearing .tx_theta_foldFill {
  transition-duration: 0.35s;
}

.tx_pageFolds > .tx_folds {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Stance plain text (no clip / mask) — whole head block through body copy */
.tx_angleIntro_head[data-theta-no-clip],
.tx_angleIntro_head[data-theta-no-clip] .tx_angleIntro_copy,
.tx_angleIntro_head[data-theta-no-clip] .tx_angleIntro_copyText,
.tx_angleIntro_head[data-theta-no-clip] .tx_angleIntro_text,
.tx_angleIntro_head[data-theta-no-clip] .tx_angleIntro_desc,
.tx_angleIntro_head[data-theta-no-clip] .tx_angleIntro_desc * {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.tx_angleIntro_head[data-theta-no-clip] .tx_angleIntro_copy,
.tx_angleIntro_head[data-theta-no-clip] .tx_angleIntro_copyText,
.tx_angleIntro_head[data-theta-no-clip] .tx_angleIntro_desc {
  color: var(--color-white);
}

.tx_angleIntro_head[data-theta-no-clip] .tx_angleIntro_copyText {
  display: block;
}

/* Each heading line carries its own gradient plate (.tx_theta_twist_back fills
   the line box), so consecutive lines butt up against each other. Space them
   out to keep the plates apart. */
.tx_angleIntro_head[data-theta-no-clip]
  .tx_angleIntro_copyText:not(:last-child) {
  margin-block-end: 0.34em;
}

.tx_angleIntro_head[data-theta-no-clip] .tx_angleIntro_text {
  display: block;
}

.tx_angleIntro_head[data-theta-no-clip] .tx_angleIntro_desc {
  display: block;
  margin: 0 0 1em;
}

/* Extra scroll room after last stance line (downward gray-clear timing) */
.tx_angleIntro_head[data-theta-no-clip] [data-theta-slit-fill-end] {
  margin-bottom: 100px;
}

/* SP: View About を本文に近づける（旧 8rem / 8.5rem は広すぎ） */
@media screen and (max-width: 47.938em) {
  .tx_angleIntro_foot {
    margin-block-start: 2.5rem !important;
  }

  .tx_angleIntro_act {
    margin-block-start: 0 !important;
  }
}

@media screen and (min-width: 48em) {
  /* PC: pull View About closer to body copy (was 300px spacer) */
  .tx_angleIntro_head[data-theta-no-clip] [data-theta-slit-fill-end] {
    margin-bottom: 80px;
  }

  .tx_aboutStance .tx_angleIntro_head[data-theta-no-clip] [data-theta-slit-fill-end] {
    margin-bottom: 4rem;
  }
}

/* Service: no clip / mask / letter hide */
.tx_offerBlock[data-theta-no-clip],
.tx_offerBlock[data-theta-no-clip] .tx_offerBlock_title,
.tx_offerBlock[data-theta-no-clip] .tx_offerBlock_desc,
.tx_offerBlock[data-theta-no-clip] .tx_landingOfferCard,
.tx_offerBlock[data-theta-no-clip] .tx_landingOfferCard_inset,
.tx_offerBlock[data-theta-no-clip] .tx_landingOfferCard_block,
.tx_offerBlock[data-theta-no-clip] .theta-clip-window {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
}

.tx_offerBlock[data-theta-no-clip] .theta-clip-window {
  display: contents;
}

/* Stance sticky THETA logo: unused — hide + collapse scroll spacer */
.tx_angleIntro_target[hidden],
.tx_angleIntro_target[aria-hidden="true"] {
  display: none !important;
}

@media screen and (min-width: 48em) {
  .tx_angleIntro_foot {
    margin-block-start: 6rem !important;
    margin-inline: 0 !important;
  }
}

.tx_pageWipe {
  overflow: hidden;
}

/* Full-viewport multi-angle field */
.tx_folds.tx_-theta-field {
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  grid-template-rows: none;
}

.tx_folds.tx_-theta-field > .tx_fold {
  position: absolute;
  left: var(--theta-slit-x, 50%);
  top: var(--theta-slit-y, 50%);
  width: 280vmax;
  height: var(--theta-slit-thickness, 7vmax);
  translate: -50% -50%;
  rotate: var(--theta-slit-angle, 0deg);
  transform-origin: center center;
  will-change: transform, scale;
}

/* Legacy class name kept as alias during rollout */
.tx_folds.tx_-theta-radial {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  grid-template-rows: none;
}

.tx_folds.tx_-theta-radial > .tx_fold {
  position: absolute;
  left: var(--theta-slit-x, 50%);
  top: var(--theta-slit-y, 50%);
  width: 280vmax;
  height: var(--theta-slit-thickness, 7vmax);
  translate: -50% -50%;
  rotate: var(--theta-slit-angle, 0deg);
  transform-origin: center center;
  will-change: transform, scale;
}

.tx_boot_folds .tx_folds.tx_-theta-field,
.tx_pageWipe_folds .tx_folds.tx_-theta-field,
.tx_boot_folds .tx_folds.tx_-theta-radial,
.tx_pageWipe_folds .tx_folds.tx_-theta-radial {
  --theta-slit-thickness: 9vmax;
}

.tx_pageFolds .tx_folds.tx_-theta-field,
.tx_footFolds .tx_folds.tx_-theta-field,
.tx_pageFolds .tx_folds.tx_-theta-radial,
.tx_footFolds .tx_folds.tx_-theta-radial {
  --theta-slit-thickness: 6vmax;
}

/* Button / line underlines: keep horizontal (no angled borders) */
[data-tx-line-hover="line"],
[data-tx-act-hover="line"],
.tx_act_line {
  rotate: 0deg !important;
  transform-origin: left center;
}

/* Clip windows: do not skew section layouts (Work / Blog / etc.) */
.theta-clip-window {
  display: block;
  overflow: hidden;
  rotate: 0deg !important;
  transform-origin: center center;
}

.theta-clip-window > [data-tx-clip="target"],
.theta-clip-window > [data-tx-zoom-clip="target"] {
  rotate: 0deg !important;
  transform-origin: center center;
}

/* Work / Blog titles: no clip mask (do not touch article grids / fade) */
.tx_projectBlock[data-theta-no-clip] > .tx_inset > .tx_projectBlock_head .tx_projectBlock_title,
.tx_projectBlock[data-theta-no-clip] > .tx_inset > .tx_projectBlock_head .tx_projectBlock_desc,
.tx_journalBlock[data-theta-no-clip] > .tx_inset > .tx_journalBlock_head .tx_projectBlock_title {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Safety: article grid area names must match grid-area on children */
.tx_caseCard_block {
  grid-template-areas: "thumbnail" "title" "list";
}

.tx_noteCard_block {
  grid-template-areas: "thumbnail" "time" "title" "tags";
}

@media (prefers-reduced-motion: reduce) {
  .tx_folds.tx_-theta-field > .tx_fold,
  .tx_folds.tx_-theta-radial > .tx_fold {
    rotate: 0deg;
  }

  [data-tx-line-hover="line"],
  [data-tx-act-hover="line"],
  .tx_act_line {
    rotate: 0deg;
  }

  .theta-clip-window,
  .theta-clip-window > [data-tx-clip="target"],
  .theta-clip-window > [data-tx-zoom-clip="target"] {
    rotate: 0deg;
  }
}