/* Home page intro: letter-drop headline, drawn line, trade picture cards, floating start bar, cursor label.
   Loaded on the home page only. All motion stops for people who ask for reduced motion. */

/* Headline letters drop in one by one (letters are wrapped by intro.js). */
.home-hero h1 .ch { display: inline-block; opacity: 0; transform: translateY(.55em) rotate(7deg); animation: wc-drop .65s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.home-hero h1 .wd { display: inline-block; white-space: nowrap; }
@keyframes wc-drop { to { opacity: 1; transform: none; } }

/* Big bold capitals, like the approved preview. */
.home-hero h1 { text-transform: uppercase; font-weight: 900; font-size: clamp(2.3rem, 4.7vw, 4.6rem); line-height: .95; letter-spacing: -.03em; position: relative; z-index: 1; }
@media (max-width: 860px) { .home-hero h1 { font-size: clamp(2rem, 9.4vw, 3.6rem); } }

/* £19.99, trial and domain chips. */
.wc-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }
.wc-chip { background: #fff; color: #0f0b2e; border: 2px solid #0f0b2e; border-radius: 999px; padding: 8px 16px; font-weight: 800; font-size: 1.05rem; box-shadow: 3px 3px 0 #0f0b2e; transform: rotate(2deg); }
.wc-chip-price { background: #f472b6; transform: rotate(-3deg); }
.wc-chip:last-child { transform: rotate(-1deg); }

/* A cyan-to-pink line that draws itself through the headline (placed by intro.js). */
.home-copy { position: relative; }
.wc-line { position: absolute; left: -24px; width: calc(100% + 160px); height: 150px; pointer-events: none; z-index: 0; }
.wc-line path { fill: none; stroke: url(#wcLineGrad); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 2600; stroke-dashoffset: 2600; opacity: .8; animation: wc-draw 2.2s 1s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes wc-draw { to { stroke-dashoffset: 0; } }
.home-hero .home-grid { position: relative; z-index: 1; }
@media (max-width: 860px) { .wc-line { left: -20px; width: calc(100% + 40px); height: 90px; } }

/* Trade picture cards. */
.trade-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-top: 24px; }
@media (max-width: 1100px) { .trade-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 800px) { .trade-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .trade-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
.trade { display: flex; flex-direction: column; background: #fff; border: 1px solid #e6e2fa; border-radius: 16px; overflow: hidden; color: #0f0b2e; text-decoration: none; box-shadow: 0 6px 18px rgba(15, 11, 46, .10); transition: transform .25s, box-shadow .25s; }
.trade img { display: block; width: 100%; height: auto; aspect-ratio: 600 / 512; object-fit: cover; transition: transform .5s; }
.trade, .trade span, .band .trade, .band .trade span { color: #0f0b2e; }
.trade span { flex: 1; display: flex; align-items: center; gap: 8px; padding: 11px 12px; font-weight: 800; font-size: 15px; line-height: 1.2; border-top: 1px solid #ece9fb; }
.trade:hover, .trade:focus-visible { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 14px 30px rgba(79, 70, 229, .3); }
.trade:hover img { transform: scale(1.06); }
@media (max-width: 600px) { .trade span { font-size: 13px; padding: 8px 9px; } }
.trade-more { margin-top: 20px; font-weight: 700; }
.trade-more a { white-space: nowrap; }

/* Floating start bar. */
.wc-dock { position: fixed; left: 50%; bottom: 18px; z-index: 60; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 999px; background: #0f0b2e; box-shadow: 0 12px 30px rgba(15, 11, 46, .35); transform: translate(-50%, 160%); transition: transform .5s cubic-bezier(.2, 1.3, .4, 1); }
.wc-dock.on { transform: translate(-50%, 0); }
.wc-dock a { color: #fff; text-decoration: none; font-weight: 800; padding: 11px 18px; border-radius: 999px; white-space: nowrap; }
.wc-dock a.go { background: linear-gradient(90deg, #4f46e5, #7c3aed); }
.wc-dock i { width: 8px; height: 8px; border-radius: 50%; background: #22d3ee; margin-left: 12px; }

/* Cursor label that follows the pointer (mouse and trackpad only). */
.wc-cur { position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none; transform: translate(-200px, -200px); }
.wc-cur span { display: inline-block; transform: translate(14px, 14px); background: #22d3ee; color: #0f0b2e; font: 800 13px/1 system-ui, sans-serif; padding: 6px 10px; border-radius: 999px; transition: background .2s, transform .2s; }
.wc-cur.hot span { background: #f472b6; transform: translate(14px, 14px) scale(1.12); }
@media (hover: none), (pointer: coarse) { .wc-cur { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .home-hero h1 .ch { animation: none; opacity: 1; transform: none; }
  .wc-line path { animation: none; stroke-dashoffset: 0; }
  .wc-dock { transition: none; }
  .wc-cur { display: none; }
}