/* ============================================================
   Part 5 — Text（テキスト） cards 061–075
   ============================================================ */

/* ---------- 061 Typewriter (t01-) ---------- */
.t01-wrap{
  font-family: Consolas, "Courier New", monospace;
  font-size: 26px;
  font-weight: 700;
  width: 6.5ch;
}
.t01-text{
  display: block;
  overflow: hidden;
  white-space: nowrap;
  color: #fff;
  line-height: 1.35;
  width: 6.15ch;
  border-right: 3px solid var(--cd);
  animation: t01-type 4s steps(6, end) infinite,
             t01-blink .8s steps(1, end) infinite;
}
@keyframes t01-type{
  0%   { width: 0ch; }
  35%  { width: 6.15ch; }
  65%  { width: 6.15ch; }
  90%  { width: 0ch; }
  100% { width: 0ch; }
}
@keyframes t01-blink{
  0%, 100% { border-color: var(--cd); }
  50%      { border-color: transparent; }
}

/* ---------- 062 Wave Text (t02-) ---------- */
.t02-word{
  display: flex;
  gap: 4px;
}
.t02-l{
  display: inline-block;
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  text-shadow: 0 3px 0 var(--cd);
  animation: t02-bob 1.3s ease-in-out infinite;
}
.t02-d2{ animation-delay: -1.14s; }
.t02-d3{ animation-delay: -0.98s; }
.t02-d4{ animation-delay: -0.82s; }
@keyframes t02-bob{
  0%, 100% { transform: translateY(7px) rotate(-3deg); }
  50%      { transform: translateY(-9px) rotate(3deg); }
}

/* ---------- 063 Stagger Fade (t03-) ---------- */
.t03-word{
  display: flex;
  gap: 3px;
}
.t03-l{
  display: inline-block;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  opacity: 0;
  animation-duration: 3.4s;
  animation-timing-function: cubic-bezier(.22, 1.2, .36, 1);
  animation-iteration-count: infinite;
}
.t03-i1{ animation-name: t03-l1; }
.t03-i2{ animation-name: t03-l2; }
.t03-i3{ animation-name: t03-l3; }
.t03-i4{ animation-name: t03-l4; }
.t03-i5{ animation-name: t03-l5; }
@keyframes t03-l1{
  0%, 4%    { opacity: 0; transform: translateY(14px); }
  13%       { opacity: 1; transform: translateY(0); }
  72%       { opacity: 1; transform: translateY(0); }
  84%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes t03-l2{
  0%, 12%   { opacity: 0; transform: translateY(14px); }
  21%       { opacity: 1; transform: translateY(0); }
  72%       { opacity: 1; transform: translateY(0); }
  84%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes t03-l3{
  0%, 20%   { opacity: 0; transform: translateY(14px); }
  29%       { opacity: 1; transform: translateY(0); }
  72%       { opacity: 1; transform: translateY(0); }
  84%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes t03-l4{
  0%, 28%   { opacity: 0; transform: translateY(14px); }
  37%       { opacity: 1; transform: translateY(0); }
  72%       { opacity: 1; transform: translateY(0); }
  84%, 100% { opacity: 0; transform: translateY(0); }
}
@keyframes t03-l5{
  0%, 36%   { opacity: 0; transform: translateY(14px); }
  45%       { opacity: 1; transform: translateY(0); }
  72%       { opacity: 1; transform: translateY(0); }
  84%, 100% { opacity: 0; transform: translateY(0); }
}

/* ---------- 064 Tracking In (t04-) ---------- */
.t04-word{
  color: #fff;
  font-size: 30px;
  font-weight: 800;
  white-space: nowrap;
  animation: t04-track 3.6s ease-in-out infinite;
}
@keyframes t04-track{
  0%        { letter-spacing: -4px; opacity: 0; transform: translateX(-2px); }
  35%       { letter-spacing: 12px; opacity: 1; transform: translateX(6px); }
  60%       { letter-spacing: 12px; opacity: 1; transform: translateX(6px); }
  95%, 100% { letter-spacing: -4px; opacity: 0; transform: translateX(-2px); }
}

/* ---------- 065 Focus Blur (t05-) ---------- */
.t05-word{
  color: #fff;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 2px;
  animation: t05-focus 3.2s ease-in-out infinite;
}
@keyframes t05-focus{
  0%, 100% { filter: blur(8px); opacity: .35; transform: scale(1.06); }
  32%      { filter: blur(0);   opacity: 1;   transform: scale(1); }
  68%      { filter: blur(0);   opacity: 1;   transform: scale(1); }
}

/* ---------- 066 Glitch Pop (t06-) ---------- */
.t06-word{
  position: relative;
  z-index: 0;
  color: #fff;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
  animation: t06-main 2.6s steps(1, end) infinite;
}
.t06-word::before,
.t06-word::after{
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  color: var(--cd);
  opacity: 0;
  z-index: -1;
}
.t06-word::before{ animation: t06-a 2.6s steps(1, end) infinite; }
.t06-word::after { animation: t06-b 2.6s steps(1, end) infinite; }
@keyframes t06-main{
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(2px, -1px); }
  13%  { transform: translate(-2px, 1px); }
  16%  { transform: translate(0, 0); }
  58%  { transform: translate(-2px, -2px); }
  61%  { transform: translate(2px, 1px); }
  64%, 100% { transform: translate(0, 0); }
}
@keyframes t06-a{
  0%   { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  10%  { opacity: .85; transform: translate(-5px, 3px);  clip-path: inset(12% 0 48% 0); }
  13%  { opacity: .85; transform: translate(3px, -2px);  clip-path: inset(55% 0 10% 0); }
  16%  { opacity: 0; transform: translate(0, 0); }
  58%  { opacity: .85; transform: translate(4px, 2px);   clip-path: inset(30% 0 30% 0); }
  61%  { opacity: .85; transform: translate(-3px, -3px); clip-path: inset(5% 0 70% 0); }
  64%, 100% { opacity: 0; transform: translate(0, 0); }
}
@keyframes t06-b{
  0%   { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  11%  { opacity: .85; transform: translate(5px, -3px);  clip-path: inset(60% 0 8% 0); }
  14%  { opacity: .85; transform: translate(-4px, 2px);  clip-path: inset(20% 0 55% 0); }
  17%  { opacity: 0; transform: translate(0, 0); }
  57%  { opacity: .85; transform: translate(-5px, 3px);  clip-path: inset(8% 0 62% 0); }
  60%  { opacity: .85; transform: translate(3px, 2px);   clip-path: inset(45% 0 20% 0); }
  63%, 100% { opacity: 0; transform: translate(0, 0); }
}

/* ---------- 067 Word Bounce (t07-) ---------- */
.t07-scene{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t07-word{
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  transform-origin: 50% 100%;
  animation: t07-drop 3.4s infinite;
}
.t07-shadow{
  position: absolute;
  left: 50%;
  top: calc(50% + 22px);
  width: 90px;
  height: 11px;
  border-radius: 50%;
  background: var(--cd);
  animation: t07-shad 3.4s infinite;
}
@keyframes t07-drop{
  0%   { transform: translateY(-130px) scale(.9, 1.12); opacity: 1; animation-timing-function: ease-in; }
  22%  { transform: translateY(0) scale(.94, 1.08); animation-timing-function: ease-out; }
  26%  { transform: translateY(0) scale(1.35, .62); animation-timing-function: ease-out; }
  36%  { transform: translateY(-46px) scale(.92, 1.06); animation-timing-function: ease-in; }
  44%  { transform: translateY(0) scale(1, 1); animation-timing-function: ease-out; }
  47%  { transform: translateY(0) scale(1.18, .85); animation-timing-function: ease-out; }
  54%  { transform: translateY(-16px) scale(.98, 1.02); animation-timing-function: ease-in; }
  60%  { transform: translateY(0) scale(1.06, .94); }
  66%  { transform: translateY(0) scale(1, 1); }
  88%  { transform: translateY(0) scale(1, 1); opacity: 1; }
  92%  { transform: translateY(0) scale(1, 1); opacity: 0; }
  93%  { transform: translateY(-130px) scale(.9, 1.12); opacity: 0; }
  100% { transform: translateY(-130px) scale(.9, 1.12); opacity: 0; }
}
@keyframes t07-shad{
  0%   { transform: translateX(-50%) scaleX(.35); opacity: .25; }
  22%  { transform: translateX(-50%) scaleX(1.15); opacity: .7; }
  26%  { transform: translateX(-50%) scaleX(1.25); opacity: .75; }
  36%  { transform: translateX(-50%) scaleX(.7);  opacity: .4; }
  44%  { transform: translateX(-50%) scaleX(1.05); opacity: .65; }
  47%  { transform: translateX(-50%) scaleX(1.1); opacity: .7; }
  54%  { transform: translateX(-50%) scaleX(.85); opacity: .5; }
  60%  { transform: translateX(-50%) scaleX(1);   opacity: .6; }
  88%  { transform: translateX(-50%) scaleX(1);   opacity: .6; }
  96%, 100% { transform: translateX(-50%) scaleX(.35); opacity: .25; }
}

/* ---------- 068 Flip Letters (t08-) ---------- */
.t08-word{
  display: flex;
  gap: 5px;
  perspective: 420px;
}
.t08-l{
  display: inline-block;
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  text-shadow: 0 2px 0 var(--cd);
  opacity: 0;
  animation-duration: 3.2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
.t08-i1{ animation-name: t08-l1; }
.t08-i2{ animation-name: t08-l2; }
.t08-i3{ animation-name: t08-l3; }
.t08-i4{ animation-name: t08-l4; }
@keyframes t08-l1{
  0%, 4%    { transform: rotateX(-100deg); opacity: 0; }
  14%       { transform: rotateX(22deg); opacity: 1; }
  20%       { transform: rotateX(0); opacity: 1; }
  78%       { transform: rotateX(0); opacity: 1; }
  86%, 100% { transform: rotateX(85deg); opacity: 0; }
}
@keyframes t08-l2{
  0%, 12%   { transform: rotateX(-100deg); opacity: 0; }
  22%       { transform: rotateX(22deg); opacity: 1; }
  28%       { transform: rotateX(0); opacity: 1; }
  78%       { transform: rotateX(0); opacity: 1; }
  86%, 100% { transform: rotateX(85deg); opacity: 0; }
}
@keyframes t08-l3{
  0%, 20%   { transform: rotateX(-100deg); opacity: 0; }
  30%       { transform: rotateX(22deg); opacity: 1; }
  36%       { transform: rotateX(0); opacity: 1; }
  78%       { transform: rotateX(0); opacity: 1; }
  86%, 100% { transform: rotateX(85deg); opacity: 0; }
}
@keyframes t08-l4{
  0%, 28%   { transform: rotateX(-100deg); opacity: 0; }
  38%       { transform: rotateX(22deg); opacity: 1; }
  44%       { transform: rotateX(0); opacity: 1; }
  78%       { transform: rotateX(0); opacity: 1; }
  86%, 100% { transform: rotateX(85deg); opacity: 0; }
}

/* ---------- 069 Shine Text (t09-) ---------- */
.t09-word{
  display: inline-block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 2px;
  background: linear-gradient(110deg,
      rgba(255,255,255,.45) 38%,
      #ffffff 50%,
      rgba(255,255,255,.45) 62%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: t09-sweep 2.8s ease-in-out infinite;
}
@keyframes t09-sweep{
  0%        { background-position: 180% 0; }
  70%, 100% { background-position: -80% 0; }
}

/* ---------- 070 Neon Flicker (t10-) ---------- */
.t10-frame{
  border: 3px solid var(--cd);
  border-radius: 16px;
  padding: 14px 22px;
}
.t10-word{
  color: #fff;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 3px;
  animation: t10-flick 3.2s linear infinite;
}
@keyframes t10-flick{
  0%, 4%, 8%, 13%, 16%, 44%, 48%, 53%, 56%, 74%, 78%, 100%{
    opacity: 1;
    text-shadow: 0 0 8px rgba(255,255,255,.9), 0 0 20px rgba(255,255,255,.55);
  }
  6%, 14.5%, 46%, 54.5%, 76%{
    opacity: .3;
    text-shadow: 0 0 8px rgba(255,255,255,0), 0 0 20px rgba(255,255,255,0);
  }
}

/* ---------- 071 Word Carousel (t11-) ---------- */
.t11-box{
  width: 132px;
  height: 38px;
  overflow: hidden;
  background: var(--cd);
  border-radius: 14px;
}
.t11-reel{
  animation: t11-roll 3.9s cubic-bezier(.65, -.25, .35, 1.25) infinite;
}
.t11-w{
  display: block;
  height: 38px;
  line-height: 38px;
  text-align: center;
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
}
@keyframes t11-roll{
  0%, 24%   { transform: translateY(0); }
  33%, 57%  { transform: translateY(-38px); }
  66%, 90%  { transform: translateY(-76px); }
  99%, 100% { transform: translateY(-114px); }
}

/* ---------- 072 Marquee (t12-) ---------- */
.t12-pill{
  width: 180px;
  overflow: hidden;
  background: var(--cd);
  border-radius: 999px;
  padding: 10px 0;
}
.t12-track{
  display: flex;
  width: max-content;
  animation: t12-scroll 4.5s linear infinite;
}
.t12-txt{
  white-space: nowrap;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}
@keyframes t12-scroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- 073 Squeeze (t13-) ---------- */
.t13-scene{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t13-word{
  color: #fff;
  font-size: 26px;
  font-weight: 800;
  animation: t13-squish 2.8s ease-in-out infinite;
}
.t13-press{
  position: absolute;
  top: 50%;
  width: 12px;
  height: 44px;
  border-radius: 6px;
  background: var(--cd);
}
.t13-pl{
  left: 50%;
  margin-left: -84px;
  animation: t13-pl 2.8s ease-in-out infinite;
}
.t13-pr{
  right: 50%;
  margin-right: -84px;
  animation: t13-pr 2.8s ease-in-out infinite;
}
@keyframes t13-squish{
  0%, 12%   { transform: scale(1, 1); }
  30%       { transform: scale(.55, 1.18); }
  44%       { transform: scale(.55, 1.18); }
  54%       { transform: scale(1.28, .82); }
  64%       { transform: scale(.92, 1.06); }
  72%       { transform: scale(1.04, .98); }
  80%, 100% { transform: scale(1, 1); }
}
@keyframes t13-pl{
  0%, 12%   { transform: translate(0, -50%); }
  30%, 44%  { transform: translate(44px, -50%); }
  54%       { transform: translate(-6px, -50%); }
  64%, 100% { transform: translate(0, -50%); }
}
@keyframes t13-pr{
  0%, 12%   { transform: translate(0, -50%); }
  30%, 44%  { transform: translate(-44px, -50%); }
  54%       { transform: translate(6px, -50%); }
  64%, 100% { transform: translate(0, -50%); }
}

/* ---------- 074 Ink Draw (t14-) ---------- */
.t14-svg{
  width: 132px;
  height: 106px;
}
.t14-guide{
  fill: none;
  stroke: var(--cd);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .45;
}
.t14-dotguide{
  fill: var(--cd);
  opacity: .45;
}
.t14-ink{
  fill: none;
  stroke: #fff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: t14-draw 3.8s ease-in-out infinite;
}
.t14-dot{
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: t14-dot 3.8s ease-in-out infinite;
}
@keyframes t14-draw{
  0%, 5%    { stroke-dashoffset: 100; }
  48%       { stroke-dashoffset: 0; }
  68%       { stroke-dashoffset: 0; }
  96%, 100% { stroke-dashoffset: 100; }
}
@keyframes t14-dot{
  0%, 46%   { opacity: 0; transform: scale(.2); }
  54%       { opacity: 1; transform: scale(1.3); }
  60%       { opacity: 1; transform: scale(1); }
  86%       { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(.2); }
}

/* ---------- 075 Comic Pop (t15-) ---------- */
.t15-scene{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t15-word{
  color: #fff;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 3px 3px 0 var(--cd);
  animation: t15-pop 2.6s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.t15-ray{
  --t15-a: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 16px;
  border-radius: 3px;
  background: #fff;
  opacity: 0;
  animation: t15-burst 2.6s ease-out infinite;
}
@keyframes t15-pop{
  0%, 6%    { transform: scale(0) rotate(-25deg); opacity: 0; }
  14%       { transform: scale(1.35) rotate(8deg); opacity: 1; }
  22%       { transform: scale(.92) rotate(-4deg); opacity: 1; }
  30%       { transform: scale(1.08) rotate(2deg); opacity: 1; }
  38%       { transform: scale(1) rotate(0deg); opacity: 1; }
  80%       { transform: scale(1) rotate(0deg); opacity: 1; }
  90%, 100% { transform: scale(0) rotate(15deg); opacity: 0; }
}
@keyframes t15-burst{
  0%, 8%    { transform: translate(-50%, -50%) rotate(var(--t15-a)) translateY(-24px) scaleY(.3); opacity: 0; }
  16%       { transform: translate(-50%, -50%) rotate(var(--t15-a)) translateY(-40px) scaleY(1.1); opacity: 1; }
  32%       { transform: translate(-50%, -50%) rotate(var(--t15-a)) translateY(-56px) scaleY(.3); opacity: 0; }
  100%      { transform: translate(-50%, -50%) rotate(var(--t15-a)) translateY(-56px) scaleY(.3); opacity: 0; }
}