/* TRACTION 공통 스타일 — Handoff 1A 디자인 토큰 (CLAUDE.md 브랜드 규칙) */

*{margin:0;padding:0;box-sizing:border-box}

/* 국문 디스플레이 서체 Paperlogy (오셔너블 BI 가이드라인 준용) — 제목의 한글 글리프 담당 */
@font-face{font-family:'Paperlogy';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --accent:#FFD100; --accentRGB:255,209,0; /* rgba() 알파용 동반 토큰 — --accent 변경 시 함께 갱신 */
  --ink:#111111; --paper:#f4f4f1;
  --radius:0px; --bw:2px; --secPad:64px;
  --headFont:'Oswald','Paperlogy'; --tt:uppercase;
  --statsBg:#111111; --statsNum:#FFD100; --statsLabel:#c8c8c2;
  --ctaBg:#FFD100; --ctaInk:#111111; --ctaBtnBg:#111111; --ctaBtnInk:#ffffff;
  /* 브라우저 강제 다크 모드 대응 — 2026-07-30 작성, **2026-07-30 실기기 측정으로 정정됨**.
     표준 브라우저(Chrome auto-dark 등)에는 이 선언이 맞다: "우리는 다크를 처리한다"는 신고이고,
     그러면 브라우저가 색을 스스로 어둡게 만들지 않는다. 그래서 남겨 둔다.
     ⚠️ 단, **삼성 인터넷에는 통하지 않는다 — 측정으로 확인했다.**
        SamsungBrowser/30.0(Android 10)에서 이 선언이 있는 페이지와 없는 페이지를
        같은 스와치로 나란히 띄워 비교했더니 **결과가 동일하게 갈색**이었다.
        (테스트 파일: `temp/darktest.html`(선언 없음) · `temp/darktest2.html`(선언 있음))
     ⚠️ 이 선언이 브랜드 색을 지켜 준다고 **믿지 말 것.** 삼성 인터넷은 그냥 덮어쓴다. */
  color-scheme:light dark;
}

/* ── 다크 모드 (2026-07-30 작성 · 같은 날 실기기 측정으로 **효과 없음이 밝혀짐**) ──
   이 블록은 원래 "페이지가 다크를 처리한다고 보여 주면 강제 변환을 건너뛴다"는
   기대로 넣은 것이다. 값을 라이트와 동일하게 둔 것도 색을 바꾸려는 게 아니라
   **신호만 주려는** 의도였다.

   ⚠️ 그런데 신고가 들어온 그 기기에서 이 블록은 **발동조차 하지 않는다.**
      SamsungBrowser/30.0(Android 10) 실측 — 화면은 검게 반전되는데
      `matchMedia('(prefers-color-scheme: dark)')`는 **false(light)** 였다.
      폰 OS는 라이트고 켜져 있는 것은 **삼성 인터넷 자체의 다크 모드**이며,
      그것은 OS 설정과 무관한 **사후 렌더링 필터**라 페이지에 dark라고 알리지도 않는다.
      즉 이 블록은 그 증상과 아무 관계가 없다. (측정: temp/darktest.html · darktest2.html)

   ⚠️ **그래도 지우지는 않는다.** OS를 다크로 둔 기기(Chrome·iOS Safari 등)에서는
      정상 경로로 발동하며, 그때 색이 뒤집히지 않게 잡아 주는 것은 이 블록이다.
   ⚠️ 값을 라이트와 다르게 만들면 진짜 다크 테마가 되고, 그때는
      7페이지 × 3언어 + 도해 22개 + 제품 사진을 전부 재검증해야 한다. */
@media (prefers-color-scheme: dark){
  :root{
    --accent:#FFD100; --accentRGB:255,209,0;
    --ink:#111111; --paper:#f4f4f1;
    --statsBg:#111111; --statsNum:#FFD100; --statsLabel:#c8c8c2;
    --ctaBg:#FFD100; --ctaInk:#111111; --ctaBtnBg:#111111; --ctaBtnInk:#ffffff;
  }
  body{background:var(--paper); color:#16160f;}
  a{color:#16160f;}
  a:hover{color:#a08800;}
  ::selection{background:#A08800; color:#111111;}
}

html{scroll-behavior:smooth}
html,body{overflow-x:clip} /* hidden은 스크롤 컨테이너를 만들어 sticky 헤더를 깨므로 clip 사용 */
body{background:var(--paper);color:#16160f;font-family:'Archivo','Pretendard',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#16160f;text-decoration:none}
a:hover{color:#a08800}
/* 드래그(선택) 하이라이트 — 2026-07-29 수정.
   기존 #FFD100은 노란 배경(제품카드 헤더·CTA·히어로 배지) 위에서 바탕색과 같아 선택이 보이지 않았다.
   다크 옐로우 #A08800은 노랑·잉크·페이퍼 세 배경 모두에서 구분되는 유일한 팔레트 색이라 전역 1개 규칙으로 처리.
   배경별로 규칙을 나누면 노란 블록이 새로 생길 때마다 같은 버그가 재발하므로 분기하지 말 것. */
::selection{background:#A08800;color:#111111}

@keyframes hazard-march{to{background-position:-64px 0}}
@keyframes scrollcue{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(9px);opacity:1}}

/* 반응형 내비게이션 */
.nav-desktop{display:flex}
.menu-burger{display:none}
/* 제품 특성 3박스의 영문 라벨 — 1100px 미만에서 숨긴다.
   RETROREFLECTIVITY(17자)는 한 단어라 줄바꿈이 불가능하고 letter-spacing까지 붙어 118px를 차지한다.
   경계를 899px로 잡았더니 900~약1080px에서 칸 테두리를 최대 19px 넘어 옆 칸 글자를 침범했다(2026-07-30 실측).
   1024·1080px 같은 흔한 노트북 폭이 그 구간에 들어가므로 1099px로 올린다.
   의미는 국문이 담고 있으므로 영문만 내려도 손실이 없다. */
@media (max-width:1099px){ .pf-en{display:none} }

/* 제품 특성 3박스 — 초소형 화면(≤380px)에서는 세로로 쌓는다.
   3열을 유지하면 칸 내부가 좁아 `고내구성`·`야간시인성`·`미끄럼저항`이
   `고내구/성` `야간시/인성`처럼 단어 중간에서 끊긴다(390px 실측: 칸 81px · 라벨 56px · 높이 47px = 2줄).
   한 줄에 담기려면 칸 내부 80px이 필요하고, 그러려면 뷰포트 약 444px 이상이어야 한다.
   → 폰 폭(479px 이하)에서는 1열로 쌓아 라벨을 한 줄로 만든다.
   .m-stack(899px)을 쓰면 태블릿 폭의 3열까지 무너지므로 별도 경계로 둔다.
   인라인 grid 선언을 이겨야 하므로 !important가 필요하다. */
@media (max-width:479px){
  .pf-grid{grid-template-columns:1fr !important}
}

@media (max-width:899px){
  .nav-desktop{display:none}
  .menu-burger{display:flex}
}
/* 320px대 헤더 CTA — **세 언어 공통** (2026-07-30, 30차)
   헤더 한 줄 = 로고 133px + gap 24 + [CTA + 버거]. 320px(clientWidth 306)에서
   오른쪽 묶음에 남는 폭은 85px뿐이다. 언어마다 다른 방식으로 깨졌다:
     · ko `샘플 요청` — 어절 사이에서 접혀 **3줄**이 되고 68px 헤더 바를 위로 22px 뚫었다
     · zh `样品`      — `样`/`品` 2줄
     · en `Sample`    — 한 단어라 접히지 못해 min-content 78px에서 멈추고 가로로 9px 넘쳤다
   `nowrap`으로 접힘을 막고 자간·패딩을 줄여 폭을 되찾는다. 실측 결과 ko 65×42(여유 4px) ·
   zh 44×42 · en 62×42(여유 7px)로 셋 다 1줄.
   ※ 가로 넘침만 보는 판정은 ko의 세로 이탈을 통과시킨다 — 헤더는 **높이도** 볼 것.
   ※ 인라인 style(site.js의 HEADER_HTML)을 이기려면 !important가 필요하다. */
@media (max-width:360px){
  header a[data-cta="sample"]{font-size:12px !important; padding:12px 10px !important;
    letter-spacing:0 !important; white-space:nowrap !important;}
}
#mobileMenu{display:none}
#mobileMenu.open{display:flex}

/* 현재 페이지 내비 하이라이트 */
.nav-desktop a.active{color:var(--accent)}

/* about.html 회사 소개 2단 (오셔너블 /about 골격) */
.ab-two{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:start}
@media (max-width:899px){
  .ab-two{grid-template-columns:1fr;gap:28px}
  /* 인라인 style의 repeat(4,1fr)을 이기려면 !important가 필요하다 (m-stack과 같은 이유) */
  .ab-grid4{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:520px){
  .ab-grid4{grid-template-columns:1fr !important}
}

/* technology.html — 기술 3종 선택 탭 (내용이 길어 페이지처럼 분리) */
.tech-nav{display:flex;border:var(--bw) solid var(--ink);background:#fff;margin-bottom:36px}
.tech-nav button{flex:1 1 0;appearance:none;border:0;background:transparent;cursor:pointer;
  text-align:left;padding:20px 24px;transition:background .2s ease}
.tech-nav button + button{border-left:var(--bw) solid var(--ink)}
.tech-nav button .n{display:block;font-family:'Space Mono','Pretendard',monospace;font-size:11px;
  letter-spacing:.2em;color:#a08800}
.tech-nav button .t{display:block;margin-top:8px;font-family:var(--headFont),'Pretendard',sans-serif;
  font-weight:600;font-size:clamp(17px,1.9vw,22px);line-height:1.25;color:var(--ink)}
.tech-nav button:hover{background:var(--paper)}
.tech-nav button[aria-selected="true"]{background:var(--ink)}
.tech-nav button[aria-selected="true"] .n{color:var(--accent)}
.tech-nav button[aria-selected="true"] .t{color:#fff}
.tech-nav button:focus-visible{outline:2px solid var(--accent);outline-offset:-4px}

.tech-panel{display:none}
.tech-panel.is-on{display:block;animation:techFade .35s ease both}
@keyframes techFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tech-body{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:start}
.tech-points{display:grid;grid-template-columns:repeat(3,1fr);border:var(--bw) solid var(--ink);
  background:#fff;margin-top:32px}
.tech-points > div{padding:28px 26px;border-right:var(--bw) solid var(--ink)}
.tech-points > div:last-child{border-right:none}

@media (max-width:899px){
  .tech-nav{flex-direction:column}
  .tech-nav button + button{border-left:0;border-top:var(--bw) solid var(--ink)}
  .tech-body{grid-template-columns:1fr;gap:26px}
  .tech-points{grid-template-columns:1fr}
  .tech-points > div{border-right:none;border-bottom:var(--bw) solid var(--ink)}
  .tech-points > div:last-child{border-bottom:none}
}

/* ── 모바일 레이아웃 보정 (2026-07-29) ──────────────────────────────
   이 사이트는 Handoff 특성상 그리드가 인라인 style에 박혀 있다.
   인라인 선언이 클래스보다 우선하므로 여기서는 !important가 불가피하다.
   새 다열 그리드를 만들면 아래 클래스를 반드시 함께 붙일 것.
     .m-stack    다열 → 1열
     .m-row3     번호 3열 목록(70px 1fr 1.3fr) → 1열 세로
     .m-cardhead 카드 헤더(제목+칩+코드) → 세로 정렬
     .m-foot     푸터 4열 → 2열                                    */
@media (max-width:899px){
  .m-stack{grid-template-columns:1fr !important}
  .m-foot{grid-template-columns:1fr 1fr !important;gap:28px !important}
  .m-row3{grid-template-columns:1fr !important;gap:8px !important;align-items:start !important}
  .m-cardhead{flex-direction:column !important;align-items:flex-start !important;gap:8px !important}
}
@media (max-width:520px){
  .m-foot{grid-template-columns:1fr !important}
}

/* ===== contact.html 문의 폼 — 2026-07-29 =====
   정적 사이트라 폼 자체로는 메일을 못 보낸다. <form data-endpoint>에 FormSubmit AJAX 주소가
   들어 있고(2026-07-30 연결), 전송이 실패하면 JS가 대체 안내를 띄운다.
   브랜드 규칙: radius 0 · 테두리 잉크 · 라벨은 Space Mono · 제출 버튼은 잉크+노랑 */
.f-form{border:var(--bw) solid var(--ink);background:#fff;padding:36px 34px;position:relative}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 26px}
.f-full{grid-column:1 / -1}
.f-field label,.f-legend{display:block;font-family:'Space Mono','Pretendard',monospace;
  font-size:13px;letter-spacing:.1em;color:#7a7a70;margin-bottom:10px;text-transform:uppercase}
.f-req{color:#a08800}
.f-field input[type=text],.f-field input[type=email],.f-field input[type=tel],.f-field textarea{
  width:100%;font-family:'Pretendard',sans-serif;font-size:17px;color:var(--ink);
  background:var(--paper);border:1px solid #cfcfc7;border-radius:0;padding:15px 16px}
.f-field textarea{min-height:118px;resize:vertical;line-height:1.65}
.f-field input:focus,.f-field textarea:focus{outline:none;background:#fff;
  border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.f-opts{display:flex;flex-wrap:wrap;gap:10px}
.f-opt{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);
  padding:11px 16px;font-size:15.5px;cursor:pointer;background:#fff}
.f-opt input{accent-color:#111111}
.f-opt:has(input:checked){background:var(--accent)}
.f-hint{margin-top:10px;font-size:14px;color:#8a8a80;line-height:1.6}
.f-consent{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:#44443c;line-height:1.65}
.f-consent input{margin-top:3px;width:17px;height:17px;accent-color:#111111}
/* 화면에는 없고 스크린리더에만 있는 제목 — 탭 패널처럼 시각적 제목을 둘 수 없는 자리에 쓴다.
   display:none이나 visibility:hidden은 접근성 트리에서도 사라지므로 쓰지 말 것. */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 언어 전환기 (2026-07-30) — 헤더·푸터에 site.js가 주입한다.
   스타일을 여기 두는 이유: JS가 만드는 인라인 style 안에는 따옴표를 넣을 수 없어
   font-family:'Space Mono'를 쓸 수 없었다. */
.lang-sw{display:flex;align-items:center;gap:6px;font-family:'Space Mono','Pretendard',monospace;
  font-size:12px;letter-spacing:.08em}
.lang-sw a,.lang-sw .is-on{display:inline-flex;align-items:center;gap:5px}
.lang-sw svg{display:block;flex:0 0 auto;border-radius:1px}
.lang-sw a{color:#9a9a90}
.lang-sw a:hover{color:var(--accent)}
.lang-sw .is-on{color:var(--accent);font-weight:700}
.lang-sw i{color:#4a4a44;font-style:normal}
/* 좁은 화면 — 헤더에는 로고·샘플요청·버거만 남긴다(전환기까지 넣으면 한 줄을 넘친다).
   전환기는 모바일 메뉴(#langSwitchMenu)와 푸터에 있다. */
@media (max-width:899px){
  #langSwitch{display:none}
}
.skip-link{position:fixed;left:-9999px;top:0;z-index:200;background:var(--accent);color:var(--ink);
  font-family:var(--headFont),'Pretendard',sans-serif;font-weight:600;font-size:15px;padding:12px 20px;
  border:var(--bw) solid var(--ink)}
.skip-link:focus{left:0}
.f-consent a{color:#a08800;text-decoration:underline}
.f-submit{appearance:none;border:0;cursor:pointer;background:var(--ink);color:var(--accent);
  font-family:var(--headFont),'Pretendard',sans-serif;font-weight:600;font-size:17px;
  letter-spacing:.06em;text-transform:uppercase;padding:19px 48px;font-size:18px}
.f-submit:hover{background:var(--ink);box-shadow:inset 0 0 0 2px var(--accent)}
.f-note{margin-top:20px;border:var(--bw) solid var(--ink);background:var(--accent);
  padding:20px 22px;font-size:15.5px;line-height:1.8;color:var(--ink)}
.f-note b{display:block;margin-bottom:6px}
.f-copy{margin-top:12px;appearance:none;cursor:pointer;background:var(--ink);color:#fff;border:0;
  font-family:'Space Mono','Pretendard',monospace;font-size:12px;letter-spacing:.1em;padding:10px 16px}
/* 유형별 조건부 필드 — data-for에 적힌 유형일 때만 보인다 (JS가 hidden 토글) */
.f-field[hidden],[data-for][hidden]{display:none !important}

/* 스팸 봇 유인용 — 사람에게는 보이지 않는다 */
.f-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
@media (max-width:899px){
  .f-form{padding:26px 20px}
  .f-grid{grid-template-columns:1fr}
}

/* 이미지 슬롯 플레이스홀더 (input/ 이미지 교체 단계에서 <img>로 치환) */
.img-slot{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:
  repeating-linear-gradient(45deg,#eaeae5 0 12px,#e2e2dc 12px 24px);color:#8a8a80;
  font-family:'Space Mono','Pretendard',monospace;font-size:12px;letter-spacing:.08em;text-align:center;padding:12px}
/* 이미지가 들어온 슬롯 — padding을 죽여 사진이 테두리에 꽉 차게 한다.
   슬롯 전체(2026-07-30 실측 8개 — index 2 · products 2 · about 인증 4)에 적용되므로
   개별 슬롯에 스타일을 붙이지 말 것. */
.img-slot:has(img){padding:0;background:var(--ink)}
.img-slot img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== 기술 상세 블록 (.td-*) — 2026-07-29 추가 =====
   ※ 원래 tech-*.html 개별 페이지용이었으나 그 파일들은 7차에 삭제됐다.
     지금은 technology.html의 탭 안에서만 쓰인다.
   특허 기반 구조 도해(인라인 SVG)를 싣는 페이지의 공통 골격.
   도해의 문장은 전부 HTML에 둔다 — SVG 안에는 라벨·번호만. (모바일 축소 시 문장이 읽히지 않기 때문)
   색 문법: 재료는 해칭으로 구분하고, 노랑(--accent)은 "그 기술이 새로 넣은 요소"에만 쓴다. */
/* 탭 패널 안에 이어 붙는 상세 블록 — 기술 상세는 별도 페이지가 아니라 탭 안에서 전개한다 */
.td-block{margin-top:60px;padding-top:46px;border-top:calc(var(--bw) + 1px) solid var(--ink)}
/* 패널이 상세 블록으로 바로 시작하는 경우 — 탭 바로 아래에 구분선이 겹치지 않게 */
.tech-panel > .td-block:first-child{margin-top:0;padding-top:0;border-top:0}
.td-block .bhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px;margin-bottom:14px}
.td-block h3{font-family:var(--headFont),'Pretendard',sans-serif;font-weight:700;
  font-size:clamp(26px,3.2vw,40px);line-height:1.12;text-transform:var(--tt);color:var(--ink)}
.td-block .bmono{font-family:'Space Mono','Pretendard',monospace;font-size:12.5px;color:#8a8a80}

.td-figure{border:var(--bw) solid var(--ink);background:#fff}
.td-panels{display:grid;grid-template-columns:1fr 1fr}
.td-panels > figure{margin:0;padding:22px 20px 8px}
.td-panels > figure + figure{border-left:var(--bw) solid var(--ink)}
.td-panels svg{width:100%;height:auto;display:block}
.td-legend{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:center;
  padding:16px 20px 6px;border-top:var(--bw) solid var(--ink)}
.td-legend span{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:#55554c}
.td-note{padding:8px 20px 16px;font-family:'Space Mono','Pretendard',monospace;
  font-size:11.5px;letter-spacing:.1em;color:#a08800}

.td-caps{display:grid;grid-template-columns:1fr 1fr;border:var(--bw) solid var(--ink);border-top:0}
.td-caps > div{padding:28px 24px 32px}
.td-caps > div + div{border-left:var(--bw) solid var(--ink)}
.td-caphead{font-family:'Space Mono','Pretendard',monospace;font-size:11.5px;letter-spacing:.18em;
  color:#8a8a80;margin-bottom:20px}
.td-item{display:grid;grid-template-columns:26px 1fr;gap:14px;margin-bottom:20px}
.td-item:last-child{margin-bottom:0}
.td-tag{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-family:'Space Mono','Pretendard',monospace;font-size:12px;font-weight:700;margin-top:2px}
.td-bad .td-tag{background:#55554c;color:#fff}
.td-good .td-tag{background:var(--ink);color:var(--accent)}
.td-item b{display:block;font-family:var(--headFont),'Pretendard',sans-serif;font-weight:600;
  font-size:17.5px;color:var(--ink);margin-bottom:4px}
.td-item p{font-size:14.5px;line-height:1.72;color:#55554c}
.td-item p strong{font-weight:700;color:var(--ink)}

.td-steps{display:grid;grid-template-columns:repeat(3,1fr);border:var(--bw) solid var(--ink)}
.td-steps > div{padding:22px 22px 28px}
.td-steps > div + div{border-left:var(--bw) solid var(--ink)}
.td-steps svg{width:100%;height:auto;display:block;margin-bottom:16px}
.td-steps b{display:block;font-family:var(--headFont),'Pretendard',sans-serif;font-weight:600;
  font-size:18px;color:var(--ink);margin-bottom:5px}
.td-steps p{font-size:14.5px;line-height:1.7;color:#55554c}

.td-tablewrap{border:var(--bw) solid var(--ink);background:#fff;padding:0 22px}
.td-table{width:100%;border-collapse:collapse;font-size:14.5px}
.td-table th,.td-table td{text-align:left;padding:15px 14px;border-bottom:1px solid #cfcfc7;vertical-align:top}
.td-table tr:last-child td{border-bottom:0}
.td-table thead th{font-family:'Space Mono','Pretendard',monospace;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8a8a80;border-bottom:var(--bw) solid var(--ink);white-space:nowrap}
.td-table td{color:#55554c;line-height:1.6}
.td-table td:first-child{font-family:var(--headFont),'Pretendard',sans-serif;font-weight:600;
  font-size:16px;color:var(--ink)}

@media (max-width:899px){
  .td-panels,.td-caps,.td-steps{grid-template-columns:1fr}
  .td-panels > figure + figure,.td-caps > div + div,.td-steps > div + div{
    border-left:0;border-top:var(--bw) solid var(--ink)}
  .td-tablewrap{overflow-x:auto;padding:0 16px}
  .td-table{min-width:680px}
}

/* 접근성: 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-hazard]{animation:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}
}