@charset "utf-8";
/* CSS Document */
.box-video {
	float: left;
	height: auto;
	width: 100%;
}
@property --aw-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
 
  .aw-stage {
    --aw-bg: #191919;
    --aw-size: 60;                        /* ขนาดวีดีโอ = 60% ของความกว้างจอ */
    --aw-c: #00AEEF; --aw-m: #EC008C; --aw-y: #FFF200;
 
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 100vh; min-height: 100svh;
    display: grid; place-items: center;
    background: var(--aw-bg);
  }
 
  /* ================= พื้นหลัง ================= */
  .aw-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
 
  /* 1) แสงฟุ้งสี C M Y ลอยช้าๆ */
  .aw-bg .b {
    position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%;
    will-change: transform; animation: aw-float 24s ease-in-out infinite alternate;
  }
  .aw-bg .c { left: -18vmax; top: -22vmax;   background: radial-gradient(circle, rgba(0,174,239,.36), transparent 66%); }
  .aw-bg .m { right: -22vmax; top: 4vmax;    background: radial-gradient(circle, rgba(236,0,140,.32), transparent 66%); animation-duration: 30s; animation-delay: -9s; }
  .aw-bg .y { left: 10vmax; bottom: -32vmax; background: radial-gradient(circle, rgba(255,242,0,.20), transparent 66%); animation-duration: 36s; animation-delay: -17s; }
  @keyframes aw-float {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(9vmax,7vmax,0) scale(1.2); }
  }
 
  /* 1.5) ข้อความ "After Webdesign" วิ่งสลับซ้าย-ขวา จางๆ อยู่หลังวีดีโอ */
  .aw-marquee {
    position: absolute; inset: -20%;
    display: flex; flex-direction: column; justify-content: space-around;
    transform: rotate(-7deg);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  }
  .aw-mq-row { overflow: hidden; white-space: nowrap; line-height: 1; }
  .aw-mq-track { display: flex; width: max-content; will-change: transform; }
  .aw-mq-track span {
    flex: none; padding-right: .9em;
    font: 800 clamp(44px, 8vw, 118px)/1 "Helvetica Neue", Arial, "Noto Sans Thai", sans-serif;
    letter-spacing: -.01em; color: rgba(255,255,255,.045);       /* จางมาก ไม่เด่นกว่าวีดีโอ */
  }
  .aw-mq-row.o span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.10); }
  .aw-mq-row.l .aw-mq-track { animation: aw-mq-left  70s linear infinite; }   /* วิ่งไปซ้าย */
  .aw-mq-row.r .aw-mq-track { animation: aw-mq-right 85s linear infinite; }   /* วิ่งไปขวา */
  .aw-mq-row:nth-child(3) .aw-mq-track { animation-duration: 95s; }
  .aw-mq-row:nth-child(4) .aw-mq-track { animation-duration: 75s; }
  @keyframes aw-mq-left  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
  @keyframes aw-mq-right { from { transform: translateX(-50%); }  to { transform: translateX(0); } }
 
  /* 2) ฮาล์ฟโทน CMYK (วาดด้วย canvas ในสคริปต์ด้านล่าง) */
  .aw-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
 
  /* 3) สัญลักษณ์แบบงานพิมพ์ ลอยหมุนช้าๆ */
  .aw-deco { position: absolute; inset: 0; }
  .aw-deco i { position: absolute; display: block; opacity: .55; will-change: transform; }
  .aw-deco .ring  { width: 64px; height: 64px; border: 2px solid var(--aw-c); border-radius: 50%; animation: aw-drift 18s ease-in-out infinite alternate, aw-spin 40s linear infinite; }
  .aw-deco .ring2 { width: 110px; height: 110px; border: 2px dashed var(--aw-m); border-radius: 50%; animation: aw-drift 24s ease-in-out infinite alternate-reverse, aw-spin 60s linear infinite reverse; }
  .aw-deco .dot   { width: 18px; height: 18px; background: var(--aw-y); border-radius: 50%; animation: aw-drift 14s ease-in-out infinite alternate; }
  .aw-deco .cross { width: 34px; height: 34px;
    background: linear-gradient(var(--aw-m),var(--aw-m)) center/2px 100% no-repeat,
                linear-gradient(var(--aw-m),var(--aw-m)) center/100% 2px no-repeat;
    animation: aw-drift 20s ease-in-out infinite alternate, aw-spin 30s linear infinite; }
  .aw-deco .reg   { width: 46px; height: 46px; border: 2px solid var(--aw-y); border-radius: 50%;
    background: linear-gradient(var(--aw-y),var(--aw-y)) center/2px 160% no-repeat,
                linear-gradient(var(--aw-y),var(--aw-y)) center/160% 2px no-repeat;
    animation: aw-drift 22s ease-in-out infinite alternate-reverse, aw-spin 50s linear infinite; }
  .aw-deco .ring  { left: 8%;  top: 18%; }
  .aw-deco .ring2 { right: 7%; top: 14%; }
  .aw-deco .dot   { left: 14%; bottom: 16%; }
  .aw-deco .cross { right: 12%; bottom: 20%; }
  .aw-deco .reg   { left: 46%; top: 7%; }
  @keyframes aw-drift { from { translate: 0 0; } to { translate: 26px -34px; } }
  @keyframes aw-spin  { to { rotate: 360deg; } }
 
  /* 4) ขอบมืดรอบจอ */
  .aw-bg::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.5) 100%);
  }
 
  /* ================= วีดีโอ ================= */
  .aw-player {
    position: relative;
    width: min(calc(var(--aw-size) * 1vw), 150vh);     /* 60% ของจอ (กันไม่ให้สูงเกินจอ) */
    aspect-ratio: 2 / 1;
    animation: aw-in 1.1s cubic-bezier(.2,.8,.2,1) both;
  }
  @keyframes aw-in { from { opacity: 0; transform: translateY(18px) scale(.92); } }
 
  /* กรอบแสงสี CMYK หมุนรอบวีดีโอ + แสงเรือง */
  .aw-ring {
    position: absolute; inset: -2px; border-radius: 16px;
    background: conic-gradient(from var(--aw-a), var(--aw-c), var(--aw-m), var(--aw-y), var(--aw-c));
    animation: aw-rot 7s linear infinite;
  }
  .aw-ring.glow { inset: -8px; filter: blur(30px); opacity: .5; }
  @keyframes aw-rot { to { --aw-a: 360deg; } }
 
  .aw-clip {
    position: relative; width: 100%; height: 100%;
    overflow: hidden; border-radius: 14px; background: #191919; line-height: 0;
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
  }
  .aw-clip video { display: none; width: 100%; height: 100%; object-fit: cover; }
  .aw-clip .aw-desktop { display: block; }
 
  @media (max-width: 768px) {
    .aw-player {
      width: min(calc(var(--aw-size) * 1vw), 40vh); width: min(calc(var(--aw-size) * 1vw), 40svh);
      aspect-ratio: 1 / 2;
    }
    .aw-clip .aw-desktop { display: none; }
    .aw-clip .aw-mobile  { display: block; }
    .aw-deco .ring2, .aw-deco .reg { display: none; }
  }
 
  /* ปุ่ม เล่น/หยุด */
  .aw-btn {
    position: absolute; right: 12px; bottom: 16px;
    width: 36px; height: 36px; padding: 0;
    border: 1px solid rgba(255,255,255,.28); border-radius: 50%;
    background: rgba(25,25,25,.62);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    cursor: pointer; opacity: .75; transition: opacity .2s, transform .2s;
  }
  .aw-btn:hover, .aw-btn:focus-visible { opacity: 1; transform: scale(1.06); }
  .aw-btn::before, .aw-btn::after {
    content: ""; position: absolute; top: 11px; width: 4px; height: 14px;
    background: #fff; border-radius: 1px;
  }
  .aw-btn::before { left: 12px; }
  .aw-btn::after  { right: 12px; }
  .aw-player.is-paused .aw-btn::before {
    left: 14px; top: 10px; width: 0; height: 0; background: none; border-radius: 0;
    border-style: solid; border-width: 8px 0 8px 13px;
    border-color: transparent transparent transparent #fff;
  }
  .aw-player.is-paused .aw-btn::after { display: none; }
 
  /* ผู้ใช้ที่ปิดแอนิเมชันในระบบ: หยุดทุกอย่างที่เคลื่อนไหวในพื้นหลัง */
  @media (prefers-reduced-motion: reduce) {
    .aw-bg .b, .aw-deco i, .aw-ring, .aw-player, .aw-mq-track { animation: none !important; }
  }